輸入範圍未移入javascript

我正試圖在START按鈕上單擊移動滑塊。

function timer(){ 
    var slider = document.getElementById("slider") 
     slider.setAttribute("value",counter) 
     slider.addEventListener("change", function(){ 
    document.getElementById("output").innerHTML = this.value; 
    counter = parseInt(this.value); 
});}

我可以增加計數器，使用上每一秒的setInterval顯示年份。但是，我無法根據年份值移動滑塊

我不打算使用jQuery。是否有可能只使用純JS？

代碼滑塊：

1900<input type="range" id="slider" min="1900" max="2015" value="1900">2015

代碼按鈕：

<button onclick="mytimer = setInterval(timer,1000)">START</button> 
<button onclick="clearInterval(mytimer)">STOP</button>

來源

2016-11-18 linthum

開始按鈕的代碼在哪裏點擊？ – tymeJV

@tymeJV我已編輯添加開始按鈕單擊的代碼。謝謝 – linthum

您還應該添加'timer'功能代碼。 – JCOC611

聲明change功能timer之外 - 你不需要它在那裏。然後在你的計時器中，實際設定值！

var slider = document.getElementById("slider"); 
slider.addEventListener("change", function(){ 
    document.getElementById("output").innerHTML = this.value; 
    counter = parseInt(this.value); 
}); 

function timer(){ 
    slider.value = parseInt(slider.value) + 1; //increment; 
}

而且，停止使用內聯JavaScript - 它雜波的HTML，使JS很難一眼就明白了：

var mytimer = null; 
function startTimer() { 
    mytimer = setInterval(timer,1000) 
} 

function stopTimer() { 
    clearInterval(mytimer); 
} 

<button onclick="startTimer()">START</button> 
<button onclick="stopTimer()">STOP</button>

最好你甚至刪除onclick和開關一切addEventListener - 但以上是一個好開始

來源

2016-11-18 17:16:47 tymeJV

謝謝，我明顯需要在代碼中分離html和javascript。一旦我點擊開始按鈕，滑塊現在將移動到最大值。即使我將滑塊移至特定年份，也會再次移至最大年份。 – linthum

非常感謝。我改變了這一行：'slider.value = slider.value + 1'到'slider.value = parseInt（slider.value）+ 1' slider.value是否返回字符串？它沒有遞增值，而是將最大值返回到slider.value，直到parseInt 謝謝 – linthum

@linthum - 是的 - 它顯示它返回一個字符串，所以'parseInt'正是需要的！ – tymeJV

輸入範圍未移入javascript

回答

相關問題