Javascript - innerHTML returns undefined then results

Question

<head>
<script>
function whammo()
{
    var i = 1;
    while(i<=5)
    {
        document.write("<h6>Test</h6>");
        i=i+1;
    }
}
</script>
</head>
<body>

<div id='page'></div>
<script>
document.getElementById('page').innerHTML = whammo();
</script>

</body>

The whammo function is to return 5 h6 Tests to be displayed, but it returns the following: undefined Test Test Test Test Test

I did my testing here: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml

Why is undefined being returned?

Arun P Johny · Accepted Answer · 2013-06-28 05:23:36Z

3

You need to create a string, and return the value from whammo

function whammo()
{
    var i = 1, html = '';
    while(i<=5)
    {
        html  += "<h6>Test</h6>";
        i=i+1;
    }
    return html
}

Demo: Fiddle

answered Jun 28, 2013 at 5:23

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

hogarth45 Over a year ago

You're right, I suppose it tried to print the function return. So obvious now. Thank you for your help. I wish I had more rep so I could upvote you.

vladkras · Accepted Answer · 2013-06-28 05:43:51Z

1

this one is shorter (and Arun P Johny forgot semicolon in the end)

function whammo() {
    for (var i=0, html=''; i<=5; i++) {
        html += '<h6>Test</h6>';
    }
    return html;
}

also, a piece of advise, use jsfiddle to show your own examples: http://jsfiddle.net/vladkras/y2vbk/ instead of w3school

answered Jun 28, 2013 at 5:43

vladkras

17.2k4 gold badges50 silver badges55 bronze badges

3 Comments

jcsanyi Over a year ago

ArunPJohny was using the OP's code as much as possible in order to highlight the actual change they were making. Refactoring the entire function obscures what was fixed. The semicolon is recommended, but not strictly required.

jcsanyi Over a year ago

You also ended up with an extra pass through the loop.

vladkras Over a year ago

1. you are right, I saw extra loop comparing my and ArunPJohny's fiddles but decided to leave as is, because the topicstarter tries to insert "test" multiple times, not exactly 5 times (also I'm a lil bit lazy, sorry), so I didn't think it's really important 2. I always try to follow recommendations, i think it's a good practice

Collectives™ on Stack Overflow

Javascript - innerHTML returns undefined then results

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related