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';
}
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 */
}
1 < 4, then each column 1 < 4.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>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> </div>
<div id=div_1_2> </div>
<div id=div_1_3> </div>
</div>
<div id=div_2>
<div id=div_1_1> </div>
<div id=div_2_2> </div>
<div id=div_3_3> </div>
</div>
<div id=div_3>
<div id=div_3_1> </div>
<div id=div_3_2> </div>
<div id=div_3_3> </div>
</div>