Ошибка: ".addEventListener is not a function",при попытке добавить цвет элементам ,у которых есть классовый индентификатор

Question

HTML

<div id="signs">

    <div class="add"align="center">+</div>  
    <div class="sub"align="center">-</div>  
    <div class="mul"align="center">*</div>  
    <div class="dir" align="center">/</div>

</div>

JS

var signs=document.getElementByClassName('add');
    signs.addEventListener('mouseover',function(){

        this.style.color="yellow";

})

Answer 1

• Вместо align="center" используйте классы в CSS;
• Вместо var используйте const (для коллекций) или let;

Ваша ошибка заключалась в том, что вы обращались к коллекции (всей), а не к её элементу. Для более простого понимания, я обратился через [0], но можно и в цикле прогнать.

const adds = document.getElementsByClassName('add');
console.log(adds);
adds[0].addEventListener('mouseover', function() {
  this.style.color = "red";
})
// Пример с циклом
const greens = document.getElementsByClassName('green');
for (let i = 0; i < greens.length; i++) {
  greens[i].addEventListener('mouseover', function() {
    this.style.color = 'green';
  });
  greens[i].addEventListener('mouseout', function() {
    this.style.color = 'black';
  });
}

.text-center {
  text-align: center;
}

<div id="signs">
  <div class="add text-center">+</div>
  <div class="sub text-center green">-</div>
  <div class="mul text-center green">*</div>
  <div class="dir text-center green">/</div>
</div>