为什么切换在 Firefox 开发人员工具上不起作用？

Question

I don't know why my javascript code is not toggling on firefox developers tools, and that's my code:

const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger');
const mobile_menu = document.querySelector('.header .nav-bar .nav-list .menu');
const header = document.querySelector('.header-container')

hamburger.addEventListener('click',() => {
    hamburger.classList.toggle('active');
});

Answer 1

try document.querySelectorAll(); ?

Answer 2

Maybe you can check, if your element is clicked or not with console.log()

hamburger.addEventListener('click', function(){
console.log("test")
})

I suggest you not to use arrow function in addEventListener, because of 'this' problem in arrow function

Answer 3

When you open developer tools in Firefox, on the left hand side of the menu there are tab header for "inspect", "console", network" and so on.

On the right hand side of the same menu bar, there is an icon of a framed document that shows "Select an iframe as the currently targeted document" when you hover over it. Click the icon and select the iframe containing the .header-container element.

Assuming the correct nested elements have been set up in HTML, the posted code now runs if you paste it after the script input prompt and press enter, and you can click the hamburger icon to toggle its active cf class.

Use of the const declaration in the pasted script prevents it being run more than once without reloading the page, which is a good thing - an even number of anonymous listeners that each toggle active would not affect the class list of the hamburger element.