Как поменять фон блоков с помощью javascript?

Question

[HelenChydilove]

Всем привет!
У меня есть главный блок, внутри него еще 10 блоков с классом "box".
Хочу чтобы при наведении курсора мыши, блоки меняли фон.
На jquery это делается без проблем. А вот на js есть у меня непонятки.
В моем коде меняет цвет при наведении только первый блок с классом "box". Я написала вот так код :
html:

<div class="main" >
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

script

var box = document.querySelector('.box');
       box.onmouseenter = function() {
          this.style.background ='rgb('+ randomColor(0,256)+ ','+ randomColor(0,256)+','+ randomColor(0,256)+')';      
    }

или еще

var box = document.querySelector('.box');
       box.addEventListener('mouseover', function(){
         this.style.background ='rgb('+ randomColor(0,256)+ ','+ randomColor(0,256)+','+ randomColor(0,256)+')';      
    });

Но результат тот же, в чем может быть причина?

Comments

[Сергей delphinpro]

document.querySelector — возвращает один элемент
document.querySelectorAll — вернёт массив элементов, по которому можно пробежаться циклом и навесить обработчики событий.

Answer 1

[Stalker_RED]

var box = document.querySelector('.box'); // первый попавшийся элемент с классом .box
box.addEventListener('mouseover', ...) // не удивительно, что меняет цвет только первый блок

querySelectorAll? Не, не слышал.

Answer 2

[Илья Серов]

querySelectorAll, но лучше

var elements = document.getElementsByClassName('box');
for (var i = 0; i < elements.length; i++) {
 elements[i].....
}

Этот вариант немного кроссбраузернее, но в целом можно не заморачиваться если заказчик не психует по этом поводу, ибо динозавров стоит забыть уже.

Answer 3

[Роман]

const boxs = document.querySelector('.main');

    function randomColor(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    }
    boxs.onmouseover = function(event) {
      console.log(event.target);
      event.target.style.backgroundColor = `rgb(${randomColor(0 , 256)}, ${randomColor(0 , 256)}, ${randomColor(0 , 256)})`;
    }
    boxs.onmouseout = function(event) {
      console.log(event.target);
      event.target.style.backgroundColor = '';
    }

link