我想将范围 slider 的值存储在本地存储中。
.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);
即使我将 slider 更改为 0 以外的其他位置,警报仍显示为零
最佳答案
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。
关于javascript - 无法在 html 中获取范围 slider 的正确值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27341654/