无法在 html 中获取范围滑块的正确值

Not able to get correct value of range slider in html

本文关键字：范围 html 获取      更新时间：2023-09-26

我想将范围滑块的值存储在本地存储中。

。.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 以外的其他位置，警报仍然显示零

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。

相关文章：