Мне нужно иметь div в строках, которые чередуются цвета.

Я пытаюсь заставить это работать в обычном браузере, прежде чем я попытаюсь реализовать это в нашей задней / передней части. Итак, вот тестовый код, который у меня есть. Я не могу на всю жизнь выяснить, почему это не работает. Я пробовал onload с телом, а не в теге сценария, и я пытался связать с внешним JS. Я подумал, что для примера кода это будет самый простой способ сделать это.

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

Чего мне здесь не хватает?

1
Travis Fleenor 29 Авг 2017 в 17:51

4 ответа

Лучший ответ

Как говорится в консоли, вы пропустили ; в цикле for. Добавьте это, и это работает.

Обратите внимание, я также упростил вашу функцию isEven(). Как @Nathan, вы также можете сделать его еще проще, удалив эту функцию, и тестирование ее непосредственно на if.

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>
2
Mistalis 29 Авг 2017 в 15:05

Ошибка синтаксиса: отсутствует; после инициализатора цикла for (строка 36 в вашем коде).

Итак, используйте:

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

- Когда вы работаете с JavaScript, проверьте в консоли браузера или JS ошибки (F12).

0
CoursesWeb 29 Авг 2017 в 15:00

И почему бы просто не остановиться на усложняющих вещах? Используйте CSS, когда требуется CSS, и Javascript, когда требуется Javascript.

    <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>
2
Carlos Alves Jorge 29 Авг 2017 в 15:03

Уйдем с JavaScript и псевдоклассом CSS :nth-child на помощь ...

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>
0
CBroe 29 Авг 2017 в 16:02