.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無法正常工作

回答

相關問題