CODEWITHSUNDEEP
javascriptcsshtml
Mina
Mina

Reputation: 3

styling several Div inside a javascript loop

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';
}

Upvotes: 0

Views: 1099

Answers (3)

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

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>

Upvotes: 0

James South
James South

Reputation: 10635

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 */
}

Upvotes: 1

brk
brk

Reputation: 50291

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>

Upvotes: 1

Related Questions