.addEventListener无法正常工作

我的代码非常简单。 .addEventListener不能用于“点击”或“更改”。我不得不在我的HTML中添加“onclick”，但据我所知，HTML中没有“onChange”事件。我正在尝试制作一个自定义视频播放器，但是查找滑块并未运行。我想知道如何让.addEventListener工作？（PS，它没有这个问题之前，无论是工作） HTML：.addEventListener无法正常工作

<div id="video_player_box"> 
      <video id="my_video" controls autoplay> 
       <source src="/videos/video.mp4"> 
      </video> 
      <div id="video_control_bar"> 
       <button id="playpausebutton" onclick="playPause()">Pause</button> 
       <input id="seekslider" type="range" min="0" max="100" value="0" step="1"> 
      </div> 
     </div>

和JS：

var vid, playBtn, seekslider; 

      function initPlayer() { 
       vid = document.getElementById("my_video"); 
       playBtn = window.getElementById("playpausebutton"); 
       seekslider = window.getElementById("seekslider"); 

       seekslider.addEventListener("change", vidSeek, false); 
      } 

      window.onload = initPlayer; 

      function playPause() { 

       if (vid.paused) { 
        vid.play(); 
        playBtn.innerHTML = "Pause"; 
       } else { 
        vid.pause(); 
        playBtn.innerHTML = "Play"; 
       } 
      } 
      function vidSeek() { 
       var seekTo = vid.duration * (seekslider.value/100); 
       vid.currentTime = seekTo; 
      }

来源

2016-02-04 Brendon Baughn

'文件。 getElementById（id）;'not'window.getElementById（id）' - 您的浏览器控制台会出现类似'Uncaught TypeError：window.getElementById'不是函数的错误' –

为什么你认为没有'onchange'？所有事件都有相应的'onXXX'属性。 – Barmar

从来没有使用过它，也没有听说过它，但我确实尝试过它并不起作用 –

解决您的js代码，此代码：

var vid, playBtn, seekslider; 

     function initPlayer() { 
      vid = document.getElementById("my_video"); 
      playBtn = document.getElementById("playpausebutton"); 
      seekslider = document.getElementById("seekslider"); 
      seekslider.addEventListener("change", vidSeek, false); 
     } 

     window.onload = initPlayer; 
     function playPause() { 
      if (vid.paused) { 
       vid.play(); 
       playBtn.innerHTML = "Pause"; 
      } else { 
       vid.pause(); 
       playBtn.innerHTML = "Play"; 
      } 
     } 

     function vidSeek() { 
      var seekTo = vid.duration * (seekslider.value/100); 
      vid.currentTime = seekTo; 
     }

来源

2016-02-04 04:31:37

.addEventListener无法正常工作

回答

相关问题