Hey there, I could really use some assistance. I am currently working on a project that involves creating 100 identical divs (rows) with four inner divs (columns) inside each one containing either an image or text. The first column in each row should have the same arrow from the first to the last row (100 rows in total).
I've attempted this multiple times but so far, I've only been able to get the arrow to display in the first row.
Here is my code, both the HTML and JavaScript:
<html>
<head>
<title>TODO supply a title</title>
<link href="index.css" rel="Stylesheet"/>
</head>
<body>
<div id="bodydiv"> <div id="leftdiv" >
<script type="text/javascript">multidivs();</script></div>
</body>
</html>
function multidivs(){
var columnnames=
["arrowdiv","contentdiv","ccontentdiv","rcontentdiv"];//styles for
innerdiv
var columnids=["arrow", "content", "ccontent", "rcontent"];
for(x=0; x<100;x++) {
var row= document.createElement('div');
row.className = "innerdiv";
for(i=0; i<4; i++){
var columndiv = document.createElement('div');
columndiv.className =columnnames[i];
columndiv.id=columnids[i];
if(columndiv.className=== columnnames[0]){
attachImage();
}
row.appendChild(columndiv);
}
document.getElementById('leftdiv').appendChild(row);
}
}
function attachImage(){
var img =document.createElement('img');
img.className= "imgdiv";
img.src="images/orangearrow.png";
var par= document.getElementById('arrow');
par.appendChild(img);
}