JavaScript для изменения цвета <div>от нажатия кнопки - PullRequest
Новая
       15

JavaScript для изменения цвета <div>от нажатия кнопки

0 голосов
/ 11 октября 2019

Я немного не уверен, почему мой код не работает, когда мой html и JS-код находятся в одном и том же файле. Когда HTML и JS разделены, кажется, работает нормально. Может кто-то укажет мне на ошибку ... Я новичок !!

HTML: 

<div class="main">
    <div class="light"></div>
    <button onclick="chngCol()" id="burn">Burn!</button>
</div>

JavaScript: 

chngCol() {
    if(document.getElementByClass('light').style.background == "#00ffff")
      { 
       document.getElementByClass('light').style.background = "#ffff00"; 
      } 
       else if(document.getElementByClass('light').style.background == "ffff00")
      {
       document.getElementByClass('light').style.background = "#ff00ff"; 
      }
       else if(document.getElementByClass('light').style.background == "#ff00ff")
      { 
       document.getElementByClass('light').style.background = "#00ffff";       
      }
   }

CSS: 

    .light{
        width: 50px;
        height: 50px;
        background-color:#00ffff;
    }

Весь код находится в одном документе с соответствующими тегами, однако ошибка, которую я получаю в консоли Chrome напервый {после вызова chngCol.

Ответы [ 2 ]

4 голосов
/ 11 октября 2019

Существует множество проблем.

  • chngCol() { недопустимо JS. Либо function chngCol() { ИЛИ const chngCol = () =>
  • Вам нужно document.getElementsByClassName("light")[0] ИЛИ лучше, document.querySelector(".light")
  • Вы не можете прочитать цвет фона элемента, если он сначала не установлен в сценарии.

Я думаю, вы хотели это сделать: 

let cnt = 0;
const colors = ["#00ffff", "#ffff00", "#ff00ff"];
const chngCol = () => {
  cnt++;
  if (cnt >= colors.length) cnt = 0; // wrap
  document.querySelector('.light').style.background = colors[cnt]; // use the array
}
document.getElementById("burn").addEventListener("click", chngCol);
.light {
  width: 50px;
  height: 50px;
  background-color: #00ffff;
}

#burn {
  width: 150px;
  font-weight: 700;
}
<div class="main">
  <div class="light"></div>
  <button id="burn">Burn!</button>
</div>
0 голосов
/ 11 октября 2019

Селектор document.getElementByClass является селектором массива. Чтобы выбрать ваш элемент, вы должны выбрать первый элемент массива. Попробуйте вместо этого: 

document.getElementsByClassName('light')[0].style.background
...