如何將JavaScript代碼轉換爲JavaScript？

Question

我有三個不同的視頻，我想同時播放。

<div class="videoWrapper"> 
       <video id="b" preload> 

      <source src="http://www.dendrosite.com/interactiu/paranoik.mp4" /> 
      <source src="http://www.dendrosite.com/interactiu/paranoik.webm" /> 


      </video> 
    </div> 

    <div class="videoWrapper"> 
     <video id="c" preload> 


      <source src="http://www.dendrosite.com/interactiu/paranoik.mp4" /> 
      <source src="http://www.dendrosite.com/interactiu/paranoik.webm" /> 



     </video> 
    </div> 

要做到這一點我創建了一個按鈕至極調用視頻，正確去，但我認爲更正確地將用javascript做到這一點。

<button onclick="document.getElementById('a').pause(); document.getElementById('b').pause(); document.getElementById('c').pause()" ><span><img src="../imatges/pause.png"></span> 
Pause</button> 

     <button onclick="document.getElementById('a').play(); document.getElementById('b').play(); document.getElementById('c').play()"><img src="../imatges/play.png"> 
Play</button> 

    <button onclick="document.getElementById('a').currentTime = 0; document.getElementById('b').currentTime = 0; document.getElementById('c').currentTime = 0"><img src="../imatges/back.png">Back to Beginning</button> 

     <button onclick="document.getElementById('a').currentTime += 5; document.getElementById('b').currentTime += 5; document.getElementById('c').currentTime += 5"><img src="../imatges/skip.png"> 
Skip 5 Seconds</button> 

的網址是：http://www.dendrosite.com/interactiu/interactiu.html

謝謝！

Answer 1

爲每個按鈕分配一個id，然後在.js文件中爲每個包含相同代碼的onclick處理程序分配一個id。

新的HTML：

<button id="pauseButton"><span><img src="../imatges/pause.png"></span>Pause</button> 

<button id="playButton"><img src="../imatges/play.png">Play</button> 

<button id="restartButton"><img src="../imatges/back.png">Back to Beginning</button> 

<button id="skipButton"><img src="../imatges/skip.png">Skip 5 Seconds</button> 

的Javascript：

document.getElementById("pauseButton").onclick = function() { 
    document.getElementById('a').pause(); 
    document.getElementById('b').pause(); 
    document.getElementById('c').pause(); 
}; 

document.getElementById("playButton").onclick = function() { 
    document.getElementById('a').play(); 
    document.getElementById('b').play(); 
    document.getElementById('c').play(); 
}; 

document.getElementById("restartButton").onclick = function() { 
    document.getElementById('a').currentTime = 0; 
    document.getElementById('b').currentTime = 0; 
    document.getElementById('c').currentTime = 0; 
}; 

document.getElementById("skipButton").onclick = function() { 
    document.getElementById('a').currentTime += 5; 
    document.getElementById('b').currentTime += 5; 
    document.getElementById('c').currentTime += 5; 
};