CODEWITHSUNDEEP
javascripthtmlcssarrays
new_coder
new_coder

Reputation: 209

Looping through elements using pure Javascript

I need to loop through an array of 3 class elements and change the background of the second one that has the class using pure Javascript.

Here's code that I'm using but it's applying red to all 3 blocks regardless instead of only the second:

var x = document.getElementsByClassName("newClass");
var i;
for (i = 0; i < x.length; i++) {
  if (x[1]) {
    x[i].style.backgroundColor = "red";
  } else {
    x[i].style.backgroundColor = "yellow";
  }
}

Is there an easier way of doing this with pure Javascript.

I'd appreciate any help with this.

Upvotes: 1

Views: 218

Answers (6)

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

If you prefer ES6:

const elements = document.querySelectorAll('newClass');
if (elements) {
  // color them all yellow
  elements.map(element => element.style.backgroundColor = 'yellow');
  // color the second element red
  if (elements[1]) elements[1].style.backgroundColor = 'red';
}

Upvotes: 1

Nemer
Nemer

Reputation: 687

// typeof x is object becareful 

let x = document.getElementsByClassName("newClass");
[...x].forEach((item, i) => {
    item.style.background = "yellow";
});
[...x][1].style.background="red";
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>

Upvotes: 0

Joe Koker
Joe Koker

Reputation: 961

If you want to loop over the elements with that class you can do this

let x = document.getElementsByClassName("newClass");
[...x].forEach((item, i) => {
  if (i == 1) {
    item.style.background = "red";
  }
});

Upvotes: 0

محمد سمير أبوسلامه
محمد سمير أبوسلامه

Reputation: 26

I think this is the solution to the problem

  var x = document.getElementsByClassName("newClass");
  var i;
  for (i = 0; i < x.length; i++) {
      x[i].style.backgroundColor = "yellow";
      if (i ==1) {
          x[i].style.backgroundColor = "red";
      }}
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>

and I also think this is a problem solving

var x = document.getElementsByClassName("newClass");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "yellow";
    }
document.getElementsByClassName("newClass")[1].
   style.backgroundColor = "red"
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>
<h1 class="newClass">hello world</h1>

Upvotes: 1

Chris Sandvik
Chris Sandvik

Reputation: 1927

I'm not sure if this is exactly what you need but in the question you just asked about changing the background color of the second element, so this should be enough. Let me know if this isn't what you're looking for.

document.getElementsByClassName("newClass")[1].style.backgroundColor = "red";

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44107

You need to check whether i == 1, not x[1]:

var x = document.getElementsByClassName("newClass");
var i;
for (i = 0; i < x.length; i++) {
    if (i == 1) {
        x[i].style.backgroundColor = "red";
    } else { 
        x[i].style.backgroundColor = "yellow";
    }
}

Upvotes: 0

Related Questions