CODEWITHSUNDEEP
javascripthtmlfor-loopbutton
DePianoman
DePianoman

Reputation: 170

Statement only happening once in for loop - JavaScript

I have this code here:

for(i = 0;i < 5;i++){
    var cond = document.createElement("input");
    cond.setAttribute('type', 'radio');
    cond.setAttribute('name', 'condition');
    cond.setAttribute('value', abc[i]);
    div1.appendChild(cond)
    var tc = document.createTextNode(conditions[i]);
    div1.appendChild(tc);
    div1.appendChild(linebreak);
}

var sskin = document.createElement("Button");
sskin.setAttribute('onClick', 'sname()');
sskin.innerHTML = "Submit";
div1.appendChild(sskin);

Here are what all the variables mean:

var div1 = document.createElement("div");
linebreak = document.createElement("br");

However, the output only applies the breakline to the last loop in the for loop. All of the buttons are side by side, and then the button is on the next line. I have no idea what is going on here.

Upvotes: 0

Views: 43

Answers (1)

Kody Lawton
Kody Lawton

Reputation: 26

this is because linebreak is a single element defined outside of your loop so you are just moving it to the end of div1 in each iteration. Try: 

for(i = 0;i < 5;i++){
    let linebreak = document.createElement("br");
    var cond = document.createElement("input");
    cond.setAttribute('type', 'radio');
    cond.setAttribute('name', 'condition');
    cond.setAttribute('value', abc[i]);
    div1.appendChild(cond)
    var tc = document.createTextNode(conditions[i]);
    div1.appendChild(tc);
    div1.appendChild(linebreak);
}

Upvotes: 1

Related Questions