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

时间:2014-12-07 10:19:39

标签: javascript html css

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

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以外的其他位置,警报也显示为零

1 个答案:

答案 0 :(得分:3)

<强> 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。