Как добавить функцию перемещения для нескольких элементов с помощью JavaScript

Question

Я пытаюсь добавить функцию перемещения к нескольким элементам на странице с помощью Javascript - простое увеличение оси Y. Я новичок в Javascript и получаю сообщение об ошибке для следующего кода, это то, что мне не хватает?

для сценария:

const eyes = document.querySelectorAll('.character');

function move(){
    this.classList.toggle('move');
}

eyes.forEach(eyes => character.addEventListener('click', move));

Я получаюследующее сообщение об ошибке:

uncaught ReferenceError: character is not defined at NodeList.forEach (<anonymous>)

Answer 1

Вы должны объявить свои переменные. Код, который вы используете для своей функции forEach, объявляет локальную область действия eyes для использования внутри вашей функции, а не character.

eyes.forEach(eyes => character.addEventListener('click', move));

в вашем коде выше, символ не объявлен и не существует.

Попробуйте что-то вроде этого:

const eyes = document.querySelectorAll('.eyes');

function move(){
    this.classList.toggle('move');

}

eyes.forEach(eye => eye.addEventListener('click', move));

.character {
 width: 50px;
 height: 50px;
 border: 1px solid black;
}


.eyes {
display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid red;
}

.move {
  border: 1px solid green;
}

<div id="world">
<div class="character"><div class="eyes"></div><div class="eyes"></div></div>
<div class="character"><div class="eyes"></div><div class="eyes"></div></div>
<div class="character"><div class="eyes"></div><div class="eyes"></div></div>
</div>