javascript - 类型错误 : Property 'handleEvent' is not callable IN FIREFOX

Question

我来这里之前用谷歌搜索了一下，这可能是一个错误，但我想先征求第二意见，也许我只是写错了代码。

我正在创建一个带有自定义控件的音频播放器。当我点击 PLAY/PAUSE 按钮时，我得到这个错误:

类型错误:属性“handleEvent”不可调用。

此错误不会发生在我的倒带 10 秒按钮或我的循环按钮上

HTML:

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

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

您正在用名为 playPause 的变量覆盖名为 playPause 的函数。

命名的函数声明被提升到顶部，但是当 createControls 运行时，您使用相同的名称但不带 var 关键字，因此名称 playPause 不再指函数，而是指按钮元素。