Javascript generated HTML not working

Question

The console doesn't give any error, and the window displays nothing. What is wrong with it?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Home</title>
    <script type="text/javascript">
        function stuffify(){
            for(var a=6;a<=0;a--){
                document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
            }
        }
    </script>
</head>
<body>
    <div id="stuff" onload="stuffify()"></div>

</body>
</html>

div elements don't trigger a load event. The function is never called. — Felix Kling
– Felix Kling, Commented Mar 12, 2013 at 1:44
Also, look at the condition on your loop. It will never be entered, it should be a>0 (it starts at 6, which is greater than zero, so the loop body never runs). — bfavaretto
– bfavaretto, Commented Mar 12, 2013 at 1:52

Nathan Anderson · Accepted Answer · 2013-03-12 01:52:36Z

2

The onload function will work when on the body tag of your document.

Also, the condition of your for loop is incorrect, it should be: for(var a=6; a >= 0; a--)

edited Mar 12, 2013 at 1:52

answered Mar 12, 2013 at 1:44

Nathan Anderson

6,87830 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nathan Anderson Over a year ago

@eicto I've updated by statement to be more correct for the problem at hand.

Nathan Anderson Over a year ago

@Calvin Koder I've updated my answer to indicate why your code would not work even when moving the event to the button you added.

PSR · Accepted Answer · 2013-03-12 01:47:41Z

0

try this

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Home</title>
    <script type="text/javascript">
        function stuffify(){
            for(var a=6;a<=0;a--){
                document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
            }
        }

    </script>
</head>
<body onload="stuffify();">
    <div id="stuff" ></div>

</body>
</html>

answered Mar 12, 2013 at 1:47

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Comments

Xiaodan Mao · Accepted Answer · 2013-03-12 02:02:33Z

0

onload is supported by following tags:

<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

This explains why stuffify is not triggered after your div is loaded.
So, you can bind the onload function to body instead of div, or insert script after div, like this:

<div id="stuff" ></div>
<script type="text/javascript">
stuffify();
</script>

answered Mar 12, 2013 at 2:02

Xiaodan Mao

1,7062 gold badges17 silver badges32 bronze badges

Collectives™ on Stack Overflow

Javascript generated HTML not working

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related