Question

我有一个滑块，当鼠标移动事件被它触发时，我想在段落中显示它的值。

这是我正在使用的代码：

var exit = document.getElementsByTagName("p");
var slide = document.getElementById('slider');
window.addEventListener("load", function(){
    slide.addEventListener("mousemove", function() {
    console.log(slide.value);
});

HTML

<input type="range" value="0" min="0" max="10" id="slider">
<p></p>

我的问题是我得到了一个＆＃34;无法读取属性＆＃39; addEventListener＆＃39; of null＆＃34;错误。有什么想法吗？

Answer 1

我认为您要为input事件添加事件监听器而不是mousemove事件。

当范围输入更改值时，input事件触发，而不是当鼠标正好在范围选择器上移动时触发。

正如@Gersey所指出的，当用户使用箭头键更改值时，将触发input事件。

这是一个突出问题的演示

＆＃13;

window.onload = function() {
  var slide = document.getElementById('slider'),
    p1 = document.querySelector('#oninput'),
    p2 = document.querySelector('#onmousemove');

  slide.addEventListener("input", function() {
    p1.textContent += ' ' + slide.value;
  });

  slide.addEventListener("mousemove", function() {
    p2.textContent += ' ' + slide.value;
  });
};

＆＃13;

div.display {
  display: inline-block;
  width: 40%;
  height: 200px;
  border: 1px solid black;
}
div {
  overflow: hidden;
}

＆＃13;

<input type="range" value="0" min="0" max="10" id="slider" />

<div>
  <div class="display" id="oninput"></div>
  <div class="display" id="onmousemove"></div>
</div>

＆＃13;

Answer 2

移动线

   var slide=document.getElementById('slider');

进入你的窗口加载回调。问题可能是在启动幻灯片时没有加载dom，所以它不在那里。

Answer 3

试试这个兄弟。

＆＃13;

        var exit = document.getElementsByTagName("p");
        var slide = document.getElementById('slider');
        slide.addEventListener("mousemove", function() {
          console.log(slide.value);
          $('p').text('value : '+slide.value);
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="range" value="0" min="0" max="10" id="slider">
<p></p>

＆＃13;

无法读取属性＆＃39; addEventListener＆＃39;在滑块上为null

3 个答案: