如何使用 JavaScript 将移动 function 添加到多个项目

Question

I'm trying to add a move function to multiple items on a page with Javascript - a simple increase in the Y axis. I'm new to Javascript and have been getting an error message for the following code, is it something I am missing?

for the script:

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

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

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

I'm am getting the following error message:

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

Answer 1

You need to declare your variables. The code you're using for your forEach function declares a locally scoped eyes for use inside your function, not character .

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

in your code above, character is not declared and doesn't exist.

Try something like this:

 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>