How can I convert my onclick JS into a click event listener?

5706 views javascript
4

Here is my codepen showing the onclick and javascript code. I'm trying to convert the JS into addEventListener, but I can't get it to work

https://codepen.io/designextras/pen/NWxaowR

const menuIcon = document.querySelector('#menu-bars')
const sideMenu = document.querySelector('#nav-menu')



function showMenu() {
if(true) {
    sideMenu.classList.add('active')
}
}

function hideMenu() {
if(true) {
    sideMenu.classList.remove('active')
}
}

HTML

  <div id="navbar">
        <a href="#" id="menu-bars" onclick="showMenu()">
            <i class="fas fa-bars"></i>
        </a>
    </div>

    <nav id="nav-menu">
        <ul class="nav-menu-items">
            <div id="navbar-toggle">
                <a href="#" id="menu-bars" onclick="hideMenu()">
                    <i class="fas fa-bars nav-icon"></i> 
                </a>

answered question

I do not see any attempts to use .addEventListener. Could you please update the code with that?

Opening menu is straight forward. Closing it is the tricky part. You will have multiple menu items. So you will have to use querySelectorAll and then loop on all elements and add listener individually.

could you edit the codepen and add how you'd do that? because I figured out how to open it with addeventlisten, but the closing part is what I'm stuck on

3 Answers

6

Remove onClick and include addEventListener like,

menuIcon.addEventListener('click', showMenu);
hideMenuIcon.addEventListener('click', hideMenu);

id should be unique but you are using it in two places id="menu-bars" which you can modify as like below snippet..

I have included new id for closing one and selected element like,

const hideMenuIcon = document.querySelector('#hide-menu-bars')

https://codepen.io/Maniraj_Murugan/pen/ZEQXwvv

And snippet as follows,

const menuIcon = document.querySelector('#menu-bars')
const hideMenuIcon = document.querySelector('#hide-menu-bars')
const sideMenu = document.querySelector('#nav-menu')



function showMenu() {
    if(true) {
        sideMenu.classList.add('active')
    }
}

function hideMenu() {
    if(true) {
        sideMenu.classList.remove('active')
    }
} 

menuIcon.addEventListener('click', showMenu);
hideMenuIcon.addEventListener('click', hideMenu);
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#navbar {
    background-color: #212121;
    height: 100px;
    display: flex;
    justify-content: start;
    align-items: center;
}

#menu-bars {
    margin-left: 2rem;
    font-size: 2rem;
    color: #fff;
} 

#hide-menu-bars {
    margin-left: 2rem;
    font-size: 2rem;
    color: #fff;
} 

#nav-menu {
    background: #212121;
    width: 250px;
    height: 100vh;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: -100%;
    transition: 450ms;
}

#nav-menu.active {
    left: 0;
    transition: 450ms;
}

.nav-text {
    display: flex;
    justify-content: start;
    list-style: none;
    height: 50px;
    padding: 1rem;
} 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> 
</head>
<div id="navbar">
            <a href="#" id="menu-bars">
                <i class="fas fa-bars"></i>
            </a>
        </div>
    
        <nav id="nav-menu">
            <ul class="nav-menu-items">
                <div id="navbar-toggle">
                    <a href="#" id="hide-menu-bars">
                        <i class="fas fa-bars nav-icon"></i> 
                    </a>

posted this
5

You just have to find the ids and add event listeners to that. Something like this:

const menuIcon = document.querySelector('#menu-bars')
const sideMenu = document.querySelector('#nav-menu')


menuIcon.addEventListener('click', function(){
   sideMenu.classList.add('active')
})

sideMenu.addEventListener('click', function(){
 sideMenu.classList.remove('active')
})
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#navbar {
    background-color: #212121;
    height: 100px;
    display: flex;
    justify-content: start;
    align-items: center;
}

#menu-bars {
    margin-left: 2rem;
    font-size: 2rem;
    color: #fff;
} 

#nav-menu {
    background: #212121;
    width: 250px;
    height: 100vh;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: -100%;
    transition: 450ms;
}

#nav-menu.active {
    left: 0;
    transition: 450ms;
}

.nav-text {
    display: flex;
    justify-content: start;
    list-style: none;
    height: 50px;
    padding: 1rem;
} 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> 
</head>
<div id="navbar">
            <a href="#" id="menu-bars">
                <i class="fas fa-bars"></i>
            </a>
        </div>
    
        <nav id="nav-menu">
            <ul class="nav-menu-items">
                <div id="navbar-toggle">
                    <a href="#" id="menu-bars">
                        <i class="fas fa-bars nav-icon"></i> 
                    </a>

posted this
6

As commented,

Opening menu is straight forward. Closing it is the tricky part. You will have multiple menu items. So you will have to use querySelectorAll and then loop on all elements and add listener individually.

Idea is, you have to add listeners to individual elements. So when you fetch multiple elements (aka NodeList), you will have to loop over it

const menuIcon = document.querySelector('#navbar a');
const menuItems = document.querySelector('#nav-menu a');
const sideMenu = document.querySelector('#nav-menu')

menuIcon.addEventListener('click', showMenu);
menuItems.addEventListener('click', hideMenu);

function showMenu() {
    if(true) {
        sideMenu.classList.add('active')
    }
}

function hideMenu() {
    if(true) {
        sideMenu.classList.remove('active')
    }
} 
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#navbar {
    background-color: #212121;
    height: 100px;
    display: flex;
    justify-content: start;
    align-items: center;
}

#menu-bars {
    margin-left: 2rem;
    font-size: 2rem;
    color: #fff;
} 

#nav-menu {
    background: #212121;
    width: 250px;
    height: 100vh;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: -100%;
    transition: 450ms;
}

#nav-menu.active {
    left: 0;
    transition: 450ms;
}

.nav-text {
    display: flex;
    justify-content: start;
    list-style: none;
    height: 50px;
    padding: 1rem;
} 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> 
</head>
<div id="navbar">
            <a href="#" id="menu-bars" onclick="showMenu()">
                <i class="fas fa-bars"></i>
            </a>
        </div>
    
        <nav id="nav-menu">
            <ul class="nav-menu-items">
                <div id="navbar-toggle">
                    <a href="#" id="menu-bars" onclick="hideMenu()">
                        <i class="fas fa-bars nav-icon"></i> 
                    </a>

posted this

Have an answer?

JD

Please login first before posting an answer.

Ads

Categories