Смена цвета div по щелчку,в чем ошибка?

Question

[Tempest99]

такая задача - Даны несколько div элементов на html.
По первому нажатию на каждый div
он перекрашивается зеленым цветом,
при повторном нажатии перекрашивается
обратно и так далее каждый клик
происходит чередование цвета.

Вот накидал такой код, но не работает. Ведь задаю, что при нажатии на любой див менялся цвет, иначе цвет остается прежним.

<div id="Div1">Box1</div>
<div id="Div2">Box2</div>
<div id="Div3">Box3</div>

var box = document.getElementsByTagName("DIV")
function(){

if(box.onclick){
    box.style.backgroundColor = 'green';
    } else{
       box.style.backgroundColor = '';
    }
};

Comments

[Tempest99]

там где Box1,Box2,Box3 съело верстку. В HTML три дива и каждый имеет id=Div1,Div2,Div3

Answer 1

[Александр]

Потому что переменная box это html-коллекция, а не конкретный див по котором вы кликаете. Чтоб менять свойство у конкретного элемента нужно использовать например цикл.

var box = document.getElementsByTagName("DIV");

for( var i = 0; i < box.length; i++) {
  box[i].addEventListener('click', function() {
    if(!this.style.backgroundColor) {
      this.style.backgroundColor = 'red';
    } else {
      this.style.backgroundColor = '';
    }
  })
}

Comments

[Tempest99]

у меня этот код не работает почему-то

[Александр]

Tempest99, все должно работать:
https://jsfiddle.net/ppx4mv0w/

Answer 2

[Finch_85]

Лучше наверное сделать присваивание класса, а не изменение свойств через style
https://jsfiddle.net/ppx4mv0w/2/

let boxes = document.querySelectorAll('.box');

boxes.forEach(element=>{
	element.addEventListener('click',()=>{
  	element.classList.toggle('colored')
  })
})

.box {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
}
.colored {
  background: red;
}

Answer 3

[Даниил Сугоняев]

Изучайте основы js, а если не хотите погружаться, то используйте jquery, скорее всего оттуда вы и взяли принцип работы с коллекциями как с элементами. Вот вам решение https://codepen.io/anon/pen/LmqxVV