Html Question posted in
Some basic documentation can be found here.

Html – JS not opening a button as intended

I’m working on a header section in HTML and decided to learn JavaScript in this project. I’m also using TailwindCSS, with a few specifics I included in a different .css file.

I got the JS code from w3schools and adapted it to fit my current setup.

I don’t really understand why the menu isnt opening when I click the button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="output.css">
    <link rel="stylesheet" href="alt.css">
</head>
<body style="background-color: #171614;">

<script>
function menudd() {
    document.getElementById(menu-main).classList.toggle("show");
}

window.onclick = function(event) {
    if (!event.target.matches('.menub')) {
        var dropdowns = document.getElementsByClassName("ddcontent");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}
</script>


    <div class="flex bg-prim py-1">
        <button onclick="menudd()" class="menub p-2 ml-2"><img src="./content/logowhite.png" width="50" height="50"></button>
        <div id="menu-main" class="ddcontent absolute bg-sec-orange mx-5 min-w-40 z-1">
            <ul>
                <li class="px-12 py-2 block text-center nav-button cursor-pointer">a</li>
                <li class="px-12 py-2 block text-center nav-button cursor-pointer">b</li>
                <li class="px-12 py-2 block text-center nav-button cursor-pointer">c</li>
            </ul>
        </div>
        <div class="relative hidden lg:flex items-center ml-auto pr-6">
            <nav class="text-sm leading-6 font-semibold text-bone">
                <ul class="ddcontent flex space-x-8">
                    <li><a class="bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Artists</a></li>
                    <li><a class="bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Contact Us</a></li>
                </ul>
            </nav>
        </div>    
    </div>
</body>
</html>

And here’s alt.css

.bg-prim {
    background-color: #7a1d00;
}

.bg-sec-orange {
    background-color: #ba3f1d;
}

.bg-sec-grey {
    background-color: #545f71;
}

.text-bone {
    color: #ece2d0;
}

.nav-button:hover {background-color: #7A1D00; transition: background-color 100ms ease-in-out;}

#menu-main {
    display: none;
}

.show {display: block;}

I tried many different things, such as playing around with Tailwind and even entering my own lines of CSS, however I’m not really sure what I’m supposed to get this working as intended.

Tags:

2

Answers


  1. 0

    I just imported your CSS values in HTML file inside style tag. Later you can use it in a separate file as well.
    In order to be understandable, I am leaving the whole code as i explained in COMMENTS.
    Important rules you should know: CSS Specifisity, !important, Id Selector

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="output.css">
<link rel="stylesheet" href="alt.css">
<style>
    .bg-prim {
        background-color: #7a1d00;
    }
    
    .bg-sec-orange {
        background-color: #ba3f1d;
    }
    
    .bg-sec-grey {
        background-color: #545f71;
    }
    
    .text-bone {
        color: #ece2d0;
    }
    
    .nav-button:hover {background-color: #7A1D00; transition: background-color 100ms ease-in-out;}
    
    #menu-main {
        display: none; /* YOU ARE GIVING VALUE FOR ID SELECTOR WHICH OVERRIDES VALUES OF CLASS, EVEN IF THEY ARE ADDED LATER(IN YOUR CASE 'show')*/
    }
    
    .show {display: block !important;} /* BUT ONLY WAY YOU CAN USE '!important' TO OVERRIDE ANY PREVIOUS  STYLES*/
    
</style>
</head>
<body style="background-color: #171614;">
 <script>
    function menudd() {
        document.getElementById('menu-main').classList.toggle("show");
        //PAY ATTENTION WHEN YOU SELECT. THEY SHOULD BE SELECTED INSIDE QUOTATION MARKS "" OR ''.
    }
    
    // window.onclick = function(event) {
    //     if (!event.target.matches('.menub')) {
    //         var dropdowns = document.getElementsByClassName("ddcontent");
    //         var i;
    //         for (i = 0; i < dropdowns.length; i++) {
    //             var openDropdown = dropdowns[i];
    //             if (openDropdown.classList.contains('show')) {
    //                 openDropdown.classList.remove('show');
    //             }
    //         }
    //     }
    // }            WE DO NOT NEED TO CREATE THIS
</script>


<div class="flex bg-prim py-1">
    <button onclick="menudd()" class="menub p-2 ml-2"><img src="./content/logowhite.png" width="50" height="50"></button>
    <div id="menu-main" class="ddcontent absolute bg-sec-orange mx-5 min-w-40 z-1">
        <ul>
            <li class="px-12 py-2 block text-center nav-button cursor-pointer">a</li>
            <li class="px-12 py-2 block text-center nav-button cursor-pointer">b</li>
            <li class="px-12 py-2 block text-center nav-button cursor-pointer">c</li>
        </ul>
    </div>
    <div class="relative hidden lg:flex items-center ml-auto pr-6">
        <nav class="text-sm leading-6 font-semibold text-bone">
            <ul class="ddcontent flex space-x-8">
                <li><a class="bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Artists</a></li>
                <li><a class="bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Contact Us</a></li>
            </ul>
        </nav>
    </div>    
</div>
    Login or Signup to reply.
  2. 0 
    **Wrong**
document.getElementById(menu-main).classList.toggle("show");

**Right**
document.getElementById('menu-main').classList.toggle("show");
// menu-main must be in double quotes "menu-main"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search