1

I need to have the divs in rows that alternate colors.

I'm trying to get this working in a regular browser before I try to implement it in our back/front end. So here is the test code I have. I can't for the life of me find out why this isn't working. I have tried the onload with the body instead of in the script tag and I have tried linking to an external jS. I figured for an example code this would be the easiest way to do it. 

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title></title>
  <meta name="description" content="HTML5">
  <meta name="author" content="Site">
  <style>
    .testclass {
      width: 100%;
      height: 10px;
      background-color: #fdc345;
    }
  </style>
</head>

<body>
  <div class="testclass"></div>
  <div class="testclass"></div>
  <div class="testclass"></div>
  <div class="testclass"></div>
  <script>
    function isEven(value) {
      if (value % 2 == 0) {
        return true;
      } else {
        return false;
      }
    }

    function setColors() {
      var userList = document.getElementsByClassName("testclass");
      var i;
      for (i = 0 i < userList.length; i++) {
        if (isEven(i) == true) {
          userList[i].style["background-color"] = "red";
          /* I also tried document.getElementsByClassName("testclass")[i].style.backgroundColor = "red" */
        } else {
          userList[i].style["background-color"] = "blue";
        }
      }
    }
    window.onload = setColors;
  </script>
</body>

</html>

What am I missing here?

Improve this question
3
  • 6
    “What am I missing here?” - that no one in their right mind uses JS for this any more, because CSS gives you all the tools you need to solve this already. developer.mozilla.org/en/docs/Web/CSS/:nth-child
    – CBroe
    Commented Aug 29, 2017 at 14:53
  • Is your for loop missing a semi-colon or it is just copy paste error?
    – Loredra L
    Commented Aug 29, 2017 at 14:54
  • Thanks for this CBroe, this actually does work with our solution and is fantastically simple.
    – Travis Fleenor
    Commented Aug 29, 2017 at 16:46

4 Answers 4

Reset to default
2

As the error in console says, you missed a ; in your for-loop. Add it, and it works.

Note I also simplified your isEven() function. As @Nathan mentioned, you can also make it even simpler by removing this function, and testing it directly on the if statment.

function isEven(value) {
    return (value % 2 == 0);
}

function setColors() {
    var userList = document.getElementsByClassName("testclass");
    var i;
    for (i = 0; i < userList.length; i++) { // <-- /!\ Here /!\
      if (isEven(i)) {
        userList[i].style["background-color"] = "red";
      } else {
        userList[i].style["background-color"] = "blue";
      }
    }
}
window.onload = setColors;
.testclass {
  width: 100%;
  height: 10px;
  background-color: #fdc345;
}
<div class="testclass"></div>
<div class="testclass"></div>
<div class="testclass"></div>
<div class="testclass"></div>

Improve this answer
3
  • I'd like to add that the isEven function is useless and can be replaced by if (i % 2).
    – Serge K.
    Commented Aug 29, 2017 at 14:56
  • @NathanP. Agreed, assuming the function is not used somewhere else in the code it would be even simpler
    – Mistalis
    Commented Aug 29, 2017 at 15:06
  • Total rookie move on my part. Thanks guys.
    – Travis Fleenor
    Commented Aug 29, 2017 at 15:15
2

And why not just stopping over complicating things? Use CSS when CSS is due and Javascript when Javascript is due.

    <style>
.testclass {
      width: 100%;
      height: 10px;
      background-color: #fdc345;
    }

    .even{
background-color:red !important;
}
    .odd{
background-color:blue !important;
}
    </style>

    /... rest of code .../
    <div class="testclass even"></div>
    <div class="testclass odd"></div>
    <div class="testclass even"></div>
    <div class="testclass odd"></div>
Improve this answer
3
  • Because the solution automatically generates divs when it pulls user records from a database and I don't have the ability to add one class to one and one to the other like that. They are all the same class or no class at all.
    – Travis Fleenor
    Commented Aug 29, 2017 at 15:31
  • And why don't you have that ability?
    – Carlos Alves Jorge
    Commented Aug 29, 2017 at 15:35
  • because the way this software works is that one div is written that is populated by the user information and then repeated for each user. This ensures that when new users or visitors are added they automatically end up on the display board. The html itself is not static in that regard.
    – Travis Fleenor
    Commented Aug 29, 2017 at 15:55
0

SyntaxError: missing ; after for-loop initializer (line 36 in your code).

So, use:

for (i=0; i<userList.length; i++) {
//...
}

- When you work with javascript, check in browser's console or js errors (F12).

Improve this answer
0
0

Away with the JavaScript, and CSS pseudo class :nth-child to the rescue ...

https://developer.mozilla.org/en/docs/Web/CSS/:nth-child

.testclass {
  height:1em;
  margin: 1em;
  background: red;
}
.testclass:nth-child(2n) {
  background: green;
}
<div class="container">
  <div class="testclass"></div>
  <div class="testclass"></div>
  <div class="testclass"></div>
  <div class="testclass"></div>
</div>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.