javascript - addEventListener does not work and i dont know why

Question

i try to code a simple Dropdown Menue with HTML, CSS and Javascript. I want to set two Eventlisteners, one with the condition of a "mouseover" and a second one on a "mouseout". Both are using a function (toggleDisplay();) with a if statement which checks the status of the style element "display" and change it accordingly.

But the function wont run, i tried to validate it with a console.log("Done") but it does not log it.

The function is defined in a external Javascript file which is implemented before the tag at the bottom of the index.html file. Any other functions in the file are working great.

Do you have any tips why the function wont run? Thank you in advance

window.onload = function(){

    console.log("Done");

    const categoryButton = document.getElementById("category-button");
    console.log(categoryButton);

    function toggleDisplay(){

        console.log("Mouseover");
    
        var categoryMenue = document.getElementById("dropdown-content");
    
            if(categoryMenue.style.display === "none"){
            categoryMenue.style.display = "block";
            }
    
            else{
            categoryMenue.style.display = "none";
            }
    
        }

    categoryButton.addEventListener("mouseover",toggleDisplay);
    categoryButton.addEventListener("mouseout", toggleDisplay);
}

#category-dropdown{
    height: 100%;
    width: 150px; 
}

#dropdown-content{
    height: 50px;
    width: 375px;
    background-color: green;
    display: none;
}

#category-button{
    width: 150px;
    height: 38px;
    font-weight: 600;
    cursor: pointer;
}

<div id="category-dropdown">
    <button id="category-button">All Categories</button>
          <div id="dropdown-content">
                 <p>Test</p>

           </div>
 </div>

question from:https://stackoverflow.com/questions/65886332/addeventlistener-does-not-work-and-i-dont-know-why

Answer 1

Waitting for answers