Using a for loop within innerHTML

Question

I want to add a box with individual boxes inside it with every age when the function is run. I tried doing it by splitting the innerHTML and using the for loop on just the agebox section so it will loop and create a new age box each time and not create a whole outerbox as well everytime like if you try loop the entire thing. I thought this would work but now it creates an age box for each loop but its placed outside the outer box and i cant figure out how to get it to loop within the outer box. If i remove the loop and just create one innerHTML then the age boxes i made manually are inside the outer box so im assuming theres a problem with the actual splitting up of the innerHTML. Thanks in advance!!

function Age(gender){
        if (gender!==undefined){
            el1 = document.getElementById('userdata');
            el1.innerHTML += gender +"<br>";    
        }
        el1 = document.getElementById('farespage');
        el1.innerHTML += "<div id=\"outerbox\">";
        for(var i=13; i<=18; i++){
            el1.innerHTML +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
        }
        el1.innerHTML += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";
    }

Just don't treat the DOM as though it's a string of HTML, and you'll do much better. — Lye Fish
– Lye Fish, Commented Apr 20, 2015 at 21:24

Derek · Accepted Answer · 2015-04-20 21:16:10Z

4

You need to store the output content as a string and then append it to the DOM. Otherwise, the div will be auto-closed.

el1 = document.getElementById('farespage');

output = "<div id=\"outerbox\">"; //initialize output string

//build output string
for(var i=13; i<=18; i++){
    output +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
}

output += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";

el1.innerHTML = output; //output to DOM

View Fiddle

answered Apr 20, 2015 at 21:16

Derek

3,4351 gold badge19 silver badges35 bronze badges

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

5 Comments

Tayler Batista Over a year ago

That makes a lot of sense but when i try it then nothing happens at all now

Derek Over a year ago

It works in the fiddle, so there must be something else going wrong in your code.

Tayler Batista Over a year ago

Ah i changed the id and class names when i wrote this so it would be easier to explain and i just copy pasted your code haha but now its working perfectly. Thanks!!

isuru Over a year ago

Nice solution. Works fine.

Samuel Ramzan Over a year ago

I needed to generate 1 to 5 input fields using a range input to generate the numeric value and this example give me the answer I needed to make it work. Thanks a lot.

Adam Kewley · Accepted Answer · 2015-04-20 21:21:24Z

The line

el1.innerHTML += "<div id=\"outerbox\">";

is actually producing

<div id="outerbox"></div>

because most browsers will auto-close the HTML tags.

You should write all your HTML into a string buffer then append it with one big call; for example:

function Age(gender){
    if (gender!==undefined){
        el1 = document.getElementById('userdata');
        el1.innerHTML += gender +"<br>";    
    }

    el1 = document.getElementById('farespage');
    // Magic begins here
    var yourHTML = "";
    yourHTML += "<div id=\"outerbox\">";
    for(var i=13; i<=18; i++){
        yourHTML +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
    }
    yourHTML += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";

    el1.innerHTML += yourHTML;
}

This has the added benefit of only touching the DOM once and not 7 times (which is generally a good thing).

Collectives™ on Stack Overflow

Using a for loop within innerHTML

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related