TypeError : 'handleEvent'속성을 호출 할 수 없습니다. FIREFOX

Question

여기에 오기 전에 Google 검색을했는데 버그 일 수 있습니다.하지만 두 번째 의견을 먼저 입력하고 싶습니다. 코드를 잘못 작성하고 싶습니다.

사용자 지정 컨트롤이있는 오디오 플레이어를 만들고 있습니다. PLAY/PAUSE 버튼을 클릭하면 다음 오류가 발생합니다.

TypeError : 'handleEvent'속성을 호출 할 수 없습니다.

<audio id="audio" controls style="width:800px;"> 
    <source src="myAudio.mp3" type="audio/mp3"> 
</audio> 

<div id="media-controls"> 
    <button type="button" id="play-pause" class="paused" >PLAY/PAUSE</button> 
    <button type="button" id="rewind10" >REWIND 10 SECONDS</button> 
    <button type="button" id="loop" >LOOP</button> 
</div> 

JS : 당신이 playPause라는 기능을 덮어하고

var track = document.getElementById('audio'); 
createControls(); 

function createControls(){ 
     playPause = document.getElementById("play-pause"); 
     rewindBTN = document.getElementById("rewind10"); 
     loopBTN = document.getElementById("loop"); 

     playPause.addEventListener("click",playPause); 

     loopBTN.addEventListener("click",loopToggle); 

     rewindBTN.addEventListener("click",rewindTenSeconds); 

    } 

    function playPause(){ 
     if(track.paused){ 
      track.play(); 
     } else { 
      track.pause(); 
     } 
    } 

    function rewindTenSeconds(){ 
     track.currentTime = track.currentTime - 10; 
    } 

    function loopToggle(){ 
     if (track.loop == false){ 
      track.loop = true; 
     } else{ 
      track.loop = false; 
     } 
    } 

Answer 1

이 오류는 내 뒤로 10 초 버튼 또는 내 루프 버튼

HTML 발생하지 않습니다 playPause라는 변수.

명명 된 함수 선언이 맨 위로 올라 왔지만 createControls가 실행될 때 var 키워드없이 동일한 이름을 사용하므로 playPause라는 이름은 더 이상 함수를 나타내지 않고 button 요소를 참조합니다.