I am having a problem with toggle button. Whenever I click on toggle button, the function doesnot respond and it does not change to cross sign?

Question

I have created a toggle button and I added a function through which when I click on toggle button it should change to cross sign whic I added through Css. But I do not understand it is not working? My code is here HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">
<title>Navbar Toggle</title>
</head>
<body>
<div class="container">
    <div class="navbar">
        <ul>
            <li class="toggle">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Trends</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>


<script src="script.js"></script>
</body>
</html>

CSS

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  background-color: #333945;
}

.navbar {
  background-color: #019031;
  color: white;
}

.navbar ul {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  list-style-type: none;
}

.navbar ul a {
  font-size: 5vh;
  display: block;
  color: white;
  text-decoration: none;
  display: block;
  padding: 25px;
}

.navbar ul a:hover {
  background-color: #333945;
}

.toggle {
  display: inline-block;
  cursor: pointer;
}

.toggle .bar1, .toggle .bar2, .toggle .bar3 {
  width: 35px;
  height: 5px;
  background-color: whitesmoke;
  margin: 6px 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.change {
  display: inline-block;
  cursor: pointer;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
          transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
          transform: rotate(45deg) translate(-8px, -8px);
}

JavaScript

let toggle = document.getElementsByClassName("toggle");

toggle.addEventListener("click",myToggle,false);

function myToggle(){
    toggleElement.classList.toggle("change"); 
}

That's all code it is. Please help me in this problem. I am new to Javascript.

Answer 1

There are two issues with your code:

You need to get the first element from the getElementsByClassName , like so let toggle = document.getElementsByClassName("toggle")[0] . Or, you could also do let toggle = document.querySelector(".toggle")
You're calling toggleElement.classList.toggle("change") but you've named the element toggle , so you'll have to change to toggle.classList.toggle("change")

Then it should work, see below:

 let toggle = document.getElementsByClassName("toggle")[0]; toggle.addEventListener("click", myToggle, false); function myToggle() { toggle.classList.toggle("change"); }

 * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } body { background-color: #333945; }.navbar { background-color: #019031; color: white; }.navbar ul { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; list-style-type: none; }.navbar ul a { font-size: 5vh; display: block; color: white; text-decoration: none; display: block; padding: 25px; }.navbar ul a:hover { background-color: #333945; }.toggle { display: inline-block; cursor: pointer; }.toggle.bar1, .toggle.bar2, .toggle.bar3 { width: 35px; height: 5px; background-color: whitesmoke; margin: 6px 0; -webkit-transition: 0.4s; transition: 0.4s; }.change { display: inline-block; cursor: pointer; }.change.bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); }.change.bar2 { opacity: 0; }.change.bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }

 <div class="container"> <div class="navbar"> <ul> <li class="toggle"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </li> <li><a href="#">Home</a></li> <li><a href="#">Trends</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div>

Answer 2

Because the result returned by getElementsByClassName is a nodelist collection you need to access the members of that collection separately in order to assign an event handler. If there were multiple elements on the page matching that className the snippet below would assign the click event handler to each.

 Array.from( document.getElementsByClassName("toggle") ).forEach( bttn=>{ bttn.addEventListener('click',function(e){ this.classList.toggle('change') }); })

 * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } body { background-color: #333945; }.navbar { background-color: #019031; color: white; }.navbar ul { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; list-style-type: none; }.navbar ul a { font-size: 5vh; display: block; color: white; text-decoration: none; display: block; padding: 25px; }.navbar ul a:hover { background-color: #333945; }.toggle { display: inline-block; cursor: pointer; }.toggle.bar1, .toggle.bar2, .toggle.bar3 { width: 35px; height: 5px; background-color: whitesmoke; margin: 6px 0; -webkit-transition: 0.4s; transition: 0.4s; }.change { display: inline-block; cursor: pointer; }.change.bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); }.change.bar2 { opacity: 0; }.change.bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }

 <div class="container"> <div class="navbar"> <ul> <li class="toggle"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </li> <li><a href="#">Home</a></li> <li><a href="#">Trends</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div>

Rather than using getElementsByClassName you could access the individual element by using querySelector instead: like this:

document.querySelector('li.toggle').addEventListener('click',function(e){/*as before*/})

I am having a problem with toggle button. Whenever I click on toggle button, the function doesnot respond and it does not change to cross sign?

Question

2 answers

solution1
1 2020-04-25 06:49:29

solution2
1 ACCPTED 2020-04-25 06:56:15

I am having a problem with toggle button. Whenever I click on toggle button, the function doesnot respond and it does not change to cross sign?

Question

2 answers

solution1 1 2020-04-25 06:49:29

solution2 1 ACCPTED 2020-04-25 06:56:15

solution1
1 2020-04-25 06:49:29

solution2
1 ACCPTED 2020-04-25 06:56:15