HTML event gives 'Uncaught TypeError: X is not a function'

user_1910690 0
Viewed 366

I had a problem. Here's the very simplified code:

<!DOCTYPE html>
<html>
<head>
    <script>
        function ended(e) {
            alert("Ended");
        }
        
        function paused(e) {
            alert("Paused");
        }

        function played(e) {
            alert("Played");
        }       
    </script>
</head>
<body>
    <div>
        <video src="videoFile.mp4" controls onended="ended(event)" onpause="paused()" onplay="played(event)" >
        </video>
    </div>
</body>
</html>

Any time I paused, played, or ended the video, I would get the error:

Uncaught TypeError: played is not a function
    at HTMLVideoElement.onplay

or the same but with paused or ended instead of played, and onpause and onended instead of onplay.

I've already solved it, so I put the answer below, for those who encounter a similar problem.

typeerror events function html javascript
2 Answers

It turns out that the HTMLMediaElement, which the <video> element is, contains some boolean properties: ended, paused and played.

And it turns out that when the browser (Chrome, maybe others) calls the event, it gets the value of those properties (which is true or false), instead of using my already defined functions. So then it tries to call true(event) or false(event), and since true and false are not functions, it gives the error that played is not a function.

So the answer is, make sure that the function names you use for events do not match properties within the relevant HTMLElement that is firing the event, and then you shouldn't have any problems. (I haven't checked, but it seems likely this would occur with other HTMLElements)

In my case I changed them to doMyEnded, doMyPaused and doMyPlayed and all was well.

NOTE: I strongly recommend anyone who wants to know more about this read the answer by T. J. Crowder

user_19106900

This is one of the many reasons not to use onxyz-attribute-style event handlers. Not only can they only call global functions (which aren't best practice), but they run in a complicated scoping environment which includes not only the current element's properties (the problem you had) but in some cases properties from other elements as well (such as the form an input is located in). (More below.)

Instead, use modern event handling (and modules when possible [all modern browsers support them]).

For example:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>
        <video src="videoFile.mp4" controls></video>
    </div>
    <script type="module">
        function ended(e) {
            console.log("Ended");
        }
        
        function paused(e) {
            console.log("Paused");
        }

        function played(e) {
            console.log("Played");
        }       

        const videoElement = document.querySelector(`video[src="videoFile.mp4"]`);
        videoElement.addEventListener("ended", ended);
        videoElement.addEventListener("pause", paused);
        videoElement.addEventListener("play", played);
    </script>
</body>
</html>

About the "complicated scoping environment": The code in an onxyz-attribute-style event handler runs in a scope that is effectively created like this (for your example):

with (document) {
    with (theTargetVideoElement) {
        // ...your code here...
    }
}

(That's right, the dreaded (and deprecated) with statement.)

For an element in a form, it's even worse:

with (document) {
    with (theForm) {
        with (theTargetElementInTheForm) {
            // ...your code here...
        }
    }
}

Here's an example of that:

<form method="POST">
    <input type="button" onclick="
        console.log(documentElement.tagName); // 'HTML'
        console.log(method); // 'post'
        console.log(type); // 'button'
    " value="Click Me">
</form>

  • documentElement comes from document
  • method comes from the form element
  • type comes from the input element

Just Say No.

user_1572470
Related