無法在html中獲得範圍滑塊的正確值

Question

我想將範圍滑塊的值存儲在本地存儲器中。

的.html

<div class="seekbar_div"> 
        <input class="seekbar" id="#light_seek" type="range" min="0" max="100" value="0" onchange="rangevalue.value=value"> 
      </div> 

的.js

var sliderVal = document.getElementById("#light_seek").value; 
    alert(sliderVal); 
       localStorage.setItem("light_seek", sliderVal); 

在這裏，即使我滑塊改變到一些其他位置比0仍是警報顯示爲零

Answer 1

jsBin demo

id="#light_seek"你在這裏有一個額外的#。

HTML：

<div class="seekbar_div"> 
    <input class="seekbar" id="light_seek" type="range" min="0" max="100" value="0"> 
</div> 

JS：

var lightSeek = document.getElementById("light_seek"); 
var sliderVal = lightSeek.value; 

console.log(sliderVal); 

lightSeek.addEventListener("change", function(){ // event listener 
    sliderVal = this.value;      // modify var 
    localStorage.setItem("light_seek", sliderVal); // Store to LS 
    console.log(sliderVal);      // test 
}, false); 

// whenever you want to grab your value back from LS do: 
// sliderVal = localStorage.getItem("light_seek"); 

此外，你可以看到我已經刪除任何HTML，JS內嵌因爲它是不好的做法，因爲它幾乎沒有維護。儘量保持您的HTML標記無JS。