Looping through elements using pure Javascript

Question

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.

Possible duplicate of [For-each over an array in JavaScript?](https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript) — Jodast, Mar 13 '19 at 02:22

score 1 · Accepted Answer · answered Mar 12 '19 at 23:02

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>

BugsArePeopleToo · Answer 2 · 2019-03-13T02:48:49.700

1

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

edited Mar 13 '19 at 02:48

answered Mar 12 '19 at 23:39

BugsArePeopleToo

2,976
1
15
16

score 0 · Answer 3 · answered Mar 12 '19 at 22:38

0

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

answered Mar 12 '19 at 22:38

Jack Bashford

43,180
11
50
79

and, for every *other* one, you can use `if( i % 2 === 0 )` – Steven Stark Mar 12 '19 at 22:42
Yes @StevenStark, but the OP only wants the *second* one. – Jack Bashford Mar 12 '19 at 22:43
1

yes, I'm just adding additional information as this is a very common thing to do next. – Steven Stark Mar 12 '19 at 22:44
Thanks a lot. The yellow applies for background to all 3 classes. It seems the condition isn't working. Thanks anyway. – new_coder Mar 12 '19 at 23:11
@new_coder the condition is correct. if it's not working, I'd look into your HTML and CSS to debug where it's going wrong. – Steven Stark Mar 12 '19 at 23:27

score 0 · Answer 4 · answered Mar 12 '19 at 22:49

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";

score 0 · Answer 5 · answered Mar 12 '19 at 23:27

0

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";
  }
});

answered Mar 12 '19 at 23:27

Joe Koker

931
10
20

score 0 · Answer 6 · answered Mar 13 '19 at 00:57

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

Looping through elements using pure Javascript

6 Answers6