I have the following Javascript code:
{
var x = document.createElement('div');
x.setAttribute('class','rowone');
x.setAttribute('id',i);
var move = 4;
x.style.marginLeft = move + "%";
x.addEventListener('click',clickdata,'false');
} // creating each div block
{
var p = document.createElement('IMG');
p.style.width = "80%";
p.style.height="100%";
p.src = orderone[i];
x.appendChild(p);
} // creating the text in block, mostly for test
document.body.append(x); // appending x into the document
} // creating first row and adding event listener
for(var j = 0; j < 8; j++){
{
var x = document.createElement('div'); x.setAttribute('class','rowtwo');
x.setAttribute('id',j+8);
var moverow = 4;
x.style.marginLeft = moverow + "%";
x.addEventListener('click',secondclick, 'false');
} // creating each div block
{
/*var p = document.createElement('p');
p.innerHTML = ordertwo[j];*/
var otherp = document.createElement('IMG');
otherp.style.width = "80%";
otherp.style.height="100%";
otherp.src = ordertwo[j];
x.appendChild(otherp);
} // creating the text in block, mostly for test
document.body.append(x); // appending x into the document
}
(orderone and ordertwo are just the arrays of images) What it does is that it creates two rows of divs, all divs having an image (from orderone or ordertwo). This is what it should look like:
However, the rows often just break up randomly (sometimes it works right, other times it just gives some other assortment, like below):
What do I do?