EventListener 不适用于所有元素

Question

My problem is that I'm stuck on trying to make several elements move onclick . When I click on any of my tags only the first one actually moves. I know I've probably made a mistake somewhere in the code but I can't find it, would be great if you guys can help me:) My code basically looks something like this:

    var my_atag0 = document.createElement('a');
    my_atag0.classList.add('nav_button');
    
var my_atag1 = document.createElement('a');
    my_atag1.classList.add('nav_button');   

var my_atag2 = document.createElement('a');  
    my_atag2.classList.add('nav_button'); 

var my_atag3 = document.createElement('a');
    my_atag3.classList.add('nav_button');


function navToggle() {
    var navStatus = false;
    
    if (navStatus == false){
        document.querySelector(".nav_button").style.marginTop = "100px";
        navStatus = true;
    } 
    else if (navStatus == true) {
        document.querySelector(".nav_button").style.marginTop = "0px";
        navStatus = false;
        
    }
}

document.querySelectorAll(".nav_button").forEach(a => {a.addEventListener("click", function() {
    navToggle()
})})

Answer 1

if (navStatus == false){
        document.querySelector(".nav_button").style.marginTop = "100px";
        navStatus = true;
    } 
    else if (navStatus == true) {
        document.querySelector(".nav_button").style.marginTop = "100px";
        navStatus = false;
        
    }

here, you are using queryselector to target all the elements. im sure it doesnt work because using querySelector to target a class will return an array containing the elements

try using querySelectorAll and loop through them to change the styles instead

const navButtons = document.querySelectorAll(".nav_button");
let navStatus = false;
if (navStatus === false){
        for (var i = 0; i < navbuttons.length; i++) {
          navbuttons[i].style.marginTop = 100px;
        }
        navStatus = true;
    } 
    else if (navStatus === true) {
        for (var i = 0; i < navbuttons.length; i++) {
          navbuttons[i].style.marginTop = 100px;
        }
        navStatus = false;
        
    }

sidenote: its not good to use var , use const and let instead

and put let navStatus = false; outside the function because sometimes putting it in the function doesn't work

Answer 2

querySelector method can get only first element of selected ones.
querySelectorAll can get NodeList object of selected elements.
this is an example for you

if(...){
  document.querySelectorAll(".nav_button").forEach(x => x.style.marginTop = "100px");
  navStatus = true;
}

and in extra, you can use this way instead of setting value in if ~ else scope

if(boolean){
  ...
  // when true
}else {
  ...
  // when false
}

boolean = !boolean;
// toggles true and false