styling several Div inside a javascript loop

Question

I have created a 3*3 matrix using JavaScript code from scratch.

Now I want to give it a border. I want to see 9 squares with a solid border.

I'm thinking about giving the style dynamically inside a loop.

I don't know how to define a variable for a div which has a unique ID.

This is my code:

for(i=1;i<=9;i++){
  'div_'+i+'_'+i.style.border= '1px solid blue';
}

See [this](https://stackoverflow.com/questions/3416227/create-dynamic-div-with-unique-ids-jquery) SO question. But first try to use CSS classes. — Jeroen Heier, Dec 13 '17 at 05:06
for(i=1;i<=3;i++){ for(j=1;j<=3;j++){ document.getElementById('div_' + i +'_'+ j).style.border = '1px solid blue'; } } — Mina, Dec 13 '17 at 06:22

score 1 · Answer 1 · answered Dec 13 '17 at 04:56

You need to get the dom using

document.getElementById & add style on that

for (i = 1; i <= 4; i++) {
  document.getElementById('div_' + i).style.border = '1px solid blue';

}

<div id="div_1">1</div>
<div id="div_2">2</div>
<div id="div_3">3</div>
<div id="div_4">4</div>

score 1 · Accepted Answer · answered Dec 13 '17 at 05:18

This isn't something I would use divs for since they provide no semantic meaning and you are creating tabular data.

I would instead use a table which is designed for just this purpose.

Additionally styling the element directly is generally considered poor practise. It's more often than not best to CSS to do this so you do not repeat yourself and are able to easily change styles.

I've written an example that demonstrates using both recommendations.

// Create a table and body
var table = document.createElement("table"); 
var body = document.createElement("tbody");

// Loop through the rows and columns to add items
var count = 1;
for (var i = 1; i < 4; i++) {

  // Create a new row
  var row = document.createElement("tr");
  for (var j = 1; j < 4; j++) {
  
    var cell = document.createElement("td");
    cell.id = count++; // Set the id
    cell.innerHTML = cell.id; // Set innerHTML to show number for example
    
    row.appendChild(cell); // Add the cell to the row
  }
  
  body.appendChild(row); // Add the row to the body
}

// Add the body to the table and the table to the document
table.appendChild(body);
document.body.appendChild(table);

table {
  border: 1px solid blue;
  /* Add the border to the whole table */
  border-left-width: 0;
  /*  But no border on the left hand side */
  border-collapse: separate;
  /*  Ensure borders are visible */
  border-spacing: 0;
  /*  But with no spaces */
}

table td {
  border-left: 1px solid blue;
  /* Add internal borders to cells */
  border-top: 1px solid blue;
}

tbody tr:first-child td {
  border-top: none;
  /* Make sure we don't have a double border on top */
}

@Mina I'm sorry, I don't understand your additional question. — James South, Dec 13 '17 at 06:07
sorry.I'm thinking about have a two loops,one for i from 1 to 3 and inside it, another loop for j from 1 to 3: for(i=1;i<=3,i++){ for(j=1;j<=3;j++){ document.getElementById('div_' + i +'_'+ j).style.border = '1px solid blue'; } } — Mina, Dec 13 '17 at 06:11
That's what my code sample is doing. I'm looping through each row `1 < 4`, then each column `1 < 4`. — James South, Dec 13 '17 at 06:23

score 0 · Answer 3 · answered Dec 13 '17 at 05:53

Just do some specific selectors from a parent element. Or add a class to all the squares.

I think you are trying to do this:

#div_main {
height: 90px;
width: 90px;

}

#div_main div{
height: 30px;
width:90px;
display: flex;
margin:0;
}

#div_main div div{
height:30px;
width:30px;
border: 1px black solid;
margin:0;
}

<div id=div_main>
  <div id=div_1>
    <div id=div_1_1>&nbsp</div>
    <div id=div_1_2>&nbsp</div>
    <div id=div_1_3>&nbsp</div>
  </div>
  <div id=div_2>
    <div id=div_1_1>&nbsp</div>
    <div id=div_2_2>&nbsp</div>
    <div id=div_3_3>&nbsp</div>
  </div>
  <div id=div_3>
    <div id=div_3_1>&nbsp</div>
    <div id=div_3_2>&nbsp</div>
    <div id=div_3_3>&nbsp</div>
  </div>

styling several Div inside a javascript loop

3 Answers3