Alternating Background colors on divs
Question
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?
4 answers
solution1
2 ACCPTED 2017-08-29 14:54:28
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>
solution2
2 2017-08-29 15:03:41
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>
solution3
0 2017-08-29 14:58:24
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).
solution4
0 2017-08-29 16:02:53
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.