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

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.

CodePudding user response：

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:

Show code snippet

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