Mark00s0011 Ответов: 2

Почему код не работает?

Почему это не работает? Где ошибки?

<body onload = "go()">
  <div class = "elem"></div>
  <button onclick = "go()">click to change bgcolor</button>
</body>


document.getElementsByClassName("elem").style.backgroundColor = "red";



div {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}


Что я уже пробовал:

Пожалуйста, объясните мне, что не так в этом коде. Каждый раз, когда я пишу код, на первый взгляд все в порядке, но когда я запускаю код, всегда что-то не так, и я теперь не знаю, что именно не так. Я в отчаянии.

2 Ответов

Рейтинг:
2

Bryian Tan

"Метод getElementsByClassName() возвращает коллекцию дочерних элементов элемента с указанным именем класса в виде объекта NodeList." Тем не менее, синтаксис JavaScript должен выглядеть следующим образом, предполагая, что существует только один элемент с именем класса "elem"

document.getElementsByClassName("elem")[0].style.backgroundColor = "red";

Пример: CP_ChangeBgColor - JSFiddle[^]

Ссылка:
Метод HTML DOM getElementsByClassName() [^]

Karthik_Mahalingam

Пять его всегда лучше, чтобы проверить индекс в коллекции.

Bryian Tan

Спасибо :). Да. - Согласился я.

Рейтинг:
1

F-ES Sitecore

getElementsByClassName возвращает массив, поэтому вам нужно пройти через элементы один за другим и установить стиль.

var els = document.getElementsByClassName("content-button");

for (var i = 0; i < els.length; i++)
{
    els[i].style.backgroundColor = "red";
}

Karthik_Mahalingam

5