TypeError: Property 'handleEvent' is not callable IN FIREFOX

Question

I did a Google search about this before coming here, it may be a bug, but I would like a second opinion first, maybe I'm just writing the code wrong.

I'm creating an audio player with custom controls. When I click the PLAY/PAUSE Button, I get this error:

TypeError: Property 'handleEvent' is not callable.

This error does NOT occur on my Rewind 10 Seconds Button OR my Loop Button

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

You're overwriting the function named playPause with the variable named playPause.

The named function declarations get hoisted to the top, but then when createControls runs you use the same name without the var keyword so the name playPause no longer refers to the function, but to the button element.

Answer 2

The existing answer is correct, but I found it hard to actually find this issue within the large web app I've been working on. In the end I used this to catch it:

const EventTargetPrototype = document.__proto__.__proto__.__proto__.__proto__;
const origAddEventListener = EventTargetPrototype.addEventListener;
EventTargetPrototype.addEventListener = function addEventListenerWrapper(type, listener) {
    if (typeof listener !== 'function') throw new Error('bad listener for ' + type);
    return origAddEventListener.apply(this, arguments);
};