CODEWITHSUNDEEP
javascripthtmlcssloops
KX0
KX0

Reputation: 99

Style for loop with CSS

Im supposed to make 8 boxes and style them each, make the boxes with for loop. Every odd box should look different then the others. I have tried to make an id, but when i use the id in CSS, it wont do anything. Can someone help?

Here is the code i have:

var text = "";
var i;
for (i = 1; i < 10; i++) {
  text += "Box number " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
.demo {
  border: black;
}
<p id="demo"></p>

Upvotes: 2

Views: 4745

Answers (3)

Drew Geisler
Drew Geisler

Reputation: 1

Your css references the "class" demo selector but your HTML uses an "id" property id='demo'. Change either one to match the other.

Upvotes: 0

Willem van der Veen
Willem van der Veen

Reputation: 36620

As volodymyr says use css nth-child property.

In javascript you can accomplish this in the following manner:

for(let i = 0; i < document.querySelectorAll('.class').length; i += 2){
  document.querySelectorAll('.class')[i].style.color = 'red';
}
   <div class="class">1</div>
    <div class="class">2</div>
    <div class="class">3</div>
    <div class="class">4</div>
    <div class="class">5</div>
    <div class="class">6</div>
    <div class="class">7</div>
    <div class="class">8</div>
    <div class="class">9</div>
    <div class="class">10</div>

This uses a for loop which iterates over every odd element, and then applies styles via javascript. Usually a pure CSS implementation would be preferable though.

Upvotes: 3

Volod
Volod

Reputation: 1427

You can use css nth-clild property

.class:nth-child(odd) {background: red}
    <div class="class">1</div>
    <div class="class">2</div>
    <div class="class">3</div>
    <div class="class">4</div>
    <div class="class">5</div>
    <div class="class">6</div>
    <div class="class">7</div>
    <div class="class">8</div>
    <div class="class">9</div>
    <div class="class">10</div>

Upvotes: 2

Related Questions