无法读取滑块上 null 的属性 'addEventListener'

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>

我的问题是出现 "Cannot read property 'addEventListener' of null" 错误。有什么想法吗？

Answer 1

移行

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

进入您的 window 加载回调。问题可能是当您初始化幻灯片时 dom 没有加载，所以它不在那里。

Answer 2

兄弟试试这个..

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

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

Answer 3

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

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

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

这是突出显示问题的演示

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;
  });
};

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

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

无法读取滑块上 null 的属性 'addEventListener'

Cannot read property 'addEventListener' of null on slider

javascript

javascript-events

event-handling

无法读取滑块上 null 的 属性 'addEventListener'

Cannot read property 'addEventListener' of null on slider

javascript

javascript-events

event-handling

无法读取滑块上 null 的属性 'addEventListener'