如何将我的 onclick JS 转换为点击事件监听器？

Question

Here is my codepen showing the onclick and javascript code.这是我的代码笔，显示了 onclick 和 javascript 代码。 I'm trying to convert the JS into addEventListener, but I can't get it to work我正在尝试将 JS 转换为 addEventListener，但我无法让它工作

https://codepen.io/designextras/pen/NWxaowR 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 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>

Answer 1

Remove onClick and include addEventListener like,删除onClick并包括addEventListener之类的，

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.. id应该是唯一的，但您在两个地方使用它id="menu-bars"您可以修改如下代码片段..

I have included new id for closing one and selected element like,我已经包含了用于关闭一个和选定元素的新id ，例如，

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

https://codepen.io/Maniraj_Murugan/pen/ZEQXwvv 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>

Answer 2

You just have to find the id s and add event listeners to that.您只需要找到id并向其中添加事件侦听器即可。 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>

Answer 3

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.因此，您将不得不使用 querySelectorAll 然后循环所有元素并单独添加侦听器。

Idea主意

You will have multiple menu items.您将有多个菜单项。 So you cannot use ids to fetch.所以你不能使用ids来获取。 For this you can use following pattern: #nav-menu a为此，您可以使用以下模式： #nav-menu a
Now fetvhing them would mean you will get a NodeList instead of HTMLElement.现在喜欢它们意味着您将获得 NodeList 而不是 HTMLElement。
So you will have to loop over the list and assign listener to indivudual elements.因此，您将不得不遍历列表并将侦听器分配给各个元素。

Following is a sample:以下是一个示例：

 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"> <i class="fas fa-bars"></i> </a> </div> <nav id="nav-menu"> <ul class="nav-menu-items"> <div id="navbar-toggle"> <a href="#"> <i class="fas fa-bars nav-icon"></i> </a>

如何将我的 onclick JS 转换为点击事件监听器？

问题描述

3 个解决方案

解决方案1
2 已采纳 2020-06-30 04:46:22

解决方案2
0 2020-06-30 04:47:52

解决方案3
0 2020-06-30 04:57:16

Idea主意

如何将我的 onclick JS 转换为点击事件监听器？

问题描述

3 个解决方案

解决方案1 2 已采纳 2020-06-30 04:46:22

解决方案2 0 2020-06-30 04:47:52

解决方案3 0 2020-06-30 04:57:16

Idea主意

解决方案1
2 已采纳 2020-06-30 04:46:22

解决方案2
0 2020-06-30 04:47:52

解决方案3
0 2020-06-30 04:57:16