admin管理员组

文章数量:1426023

I have a quick question. I am trying to incorporate an onload event in HTML5. Here is my code but it refuses to work. Please let me know what I am doing wrong.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Animation</title>

    <script>
        document.getElementById('videoBackground').onload = function()
        {
            document.body.style.backgroundColor = 'black';
        }
    </script>

    <script type="text/javascript" src="js/animCD.js"></script>    
    <link rel="stylesheet" href="style.css" type="text/css" />

    </head>
    <body>

    <video id="videoBackground" poster="img/loading.png" onload="function()" width="1920" height="1080" preload="auto" onprogress="animCD_onprogress();" onended="animCD_start();">
        <source id="colorVid_mp4" type="video/mp4" src="img/luther_color.mp4">      
    </video>

I have a quick question. I am trying to incorporate an onload event in HTML5. Here is my code but it refuses to work. Please let me know what I am doing wrong.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Animation</title>

    <script>
        document.getElementById('videoBackground').onload = function()
        {
            document.body.style.backgroundColor = 'black';
        }
    </script>

    <script type="text/javascript" src="js/animCD.js"></script>    
    <link rel="stylesheet" href="style.css" type="text/css" />

    </head>
    <body>

    <video id="videoBackground" poster="img/loading.png" onload="function()" width="1920" height="1080" preload="auto" onprogress="animCD_onprogress();" onended="animCD_start();">
        <source id="colorVid_mp4" type="video/mp4" src="img/luther_color.mp4">      
    </video>
  • javascript
  • html
  • events
  • onload
Share Improve this question asked Nov 21, 2012 at 3:54 user1839872user1839872 231 gold badge1 silver badge6 bronze badges 2
  • the head and html tags are closed in your original html? – Răzvan Flavius Panda Commented Nov 21, 2012 at 3:59
  • What exactly do you mean by "it refuses to work"? Do you see any errors in your browser's JavaScript console? – Justin Morgan Commented Nov 21, 2012 at 4:04
Add a ment  | 

2 Answers 2

Reset to default 1

Specifying someElement.onload = function() { } is how you create an onload handler in a general sense. The reason your doesn't work is that your script block es before the element in question and runs immediately, at which point document.getElementById() can't find that element because it hasn't been parsed yet.

You can fix this by moving the script block to somewhere after the element (many people put their scripts at the end of the body), or by calling it in an onload handler for the page:

window.onload = function() {
    document.getElementById('videoBackground').onload = function() {
        document.body.style.backgroundColor = 'black';
    }
};

Although the page/window's onload should be called after all content is loaded, so I'm not sure that there's any point creating more onload handlers from there.

I notice you also have an onload="function()" attribute in your html. That is another way to specify a handler, although inline event attributes are not the preferred way to do things, but you'd need to put an actual function name onload="someFunction()" to call a named function defined elsewhere, or put the code directly:

<video ... onload="document.body.style.backgroundColor='black';" ...>

At the point where you are executing getElementById('videoBackground') the element with the id videoBackground doesn't exist yet.

Either move the script below where you created the videoBackground element or run the script after the DOM loads using document.onload.

本文标签： javascriptIs this how you incorporate an Onload EventStack Overflow

版权声明：本文标题：javascript - Is this how you incorporate an Onload Event? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745420528a2657880.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。