Description

I'm currently trying to use the modulus operator in JavaScript, to target a specific HTML list and make it so the items in there that are odd has X color and those who are even has Y color.

function newFunction() {
  var items = document.getElementById("oddEven");
  var index = items.querySelectorAll("li");
  console.log(index);

  for (var i = 0; i < items.length; i  ) {
    console.log(i);
    console.log(items[i]);
    if (i % 2 == 1) {
      document.getElementById("oddEven").style.color = "orange";
    } else {
      document.getElementById("oddEven").style.color = "blue";
    }
  }
}
newFunction();

<ul id="oddEven">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Errors None in JSlint, IDE VS CODE, Console.

Attempts I've searched around for similiar topics regarding modulus which there are a bunch of, but mostly all of them tend to be regarding background colors for completely different elements. Even when i've replicated others code and just edited out the targeted elements, i simply can't get it to work.

Question Is it that I'm using the for loop wrong here? Or is the modulus just completely off? I thought about the "if" and "else" document.getX, perhaps that is used wrong..

Is there someone who coud give a fresh eye of where my code is wrong, or just a hint..

CodePudding user response：

A couple things...

• The index selector would have worked in the loop, but that wasn't even being used, so I've removed it. I've combined the two with method chaining. You could simplify further with document.querySelectorAll('#oddEven li').
• You were setting the class on the list rather than the item. I'm setting it by index from the selector list.

function newFunction() {
  var items = document.getElementById("oddEven").querySelectorAll("li");

  for (var i = 0; i < items.length; i  ) {
    if (i % 2 == 1) {
      items[i].style.color = "orange";
    } else {
      items[i].style.color = "blue";
    }
  }
}
newFunction();

<ul id="oddEven">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

CodePudding user response：

Adding an alternative, it iterates through a NodeList with .forEach() and uses ternary operators:

node.style.color = index === 0 || index % 2 === 0 ? colorEven : colorOdd;

The value of current node (element) is the color for even numbers IF index is 0 OR index can be divided by 2 evenly OTHERWISE, it's the color for odd numbers.

const items = document.querySelectorAll("li");

function stripes(nodeList, colorOdd, colorEven) {
  nodeList.forEach((node, index) => {
    node.style.color = index === 0 || index % 2 === 0 ? colorEven : colorOdd;
  });
}

stripes(items, 'orange', 'blue');

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

CodePudding user response：

Rather than setting the item.style.color you would be better off adding a class to the list-item, like item.classList.add('odd'); (or 'even') and styling li.odd and li.even the way you want.

const oddEvenClasses = [ 'even', 'odd' ];

function newFunction() {
  var items = document.getElementById("oddEven").querySelectorAll("li");

  for (var i = 0; i < items.length; i  ) {
    items[i].classList.add(oddEvenClasses[(i 1) % 2]);
  }
}
newFunction();

li.even {
    color: orange;
}
li.odd {
    color: blue;
}

<ul id="oddEven">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Of course — you could also do it with pure CSS and no JS needed, using a CSS selector li with nth-of-type

ul.oddEven li:nth-of-type(2n) {
  color: orange;
}
ul.oddEven li:nth-of-type(2n 1) {
  color: blue;
}

<ul >
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>