CODEWITHSUNDEEP
javascripthtmlcss
Travis Fleenor
Travis Fleenor

Reputation: 167

Alternating Background colors on divs

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?

Upvotes: 1

Views: 743

Answers (4)

C3roe
C3roe

Reputation: 96226

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>

Upvotes: 0

Mistalis
Mistalis

Reputation: 18269

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>

Upvotes: 2

Carlos Alves Jorge
Carlos Alves Jorge

Reputation: 1985

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>

Upvotes: 2

CoursesWeb
CoursesWeb

Reputation: 4237

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).

Upvotes: 0

Related Questions