Listening for events on an image does not change the visibility of an unordered list

Question

Listening for events on an image does not change the visibility of an unordered list

Whenever the user clicks on the menu bar icon at the top right corner of the page, the display property of the navigation links should toggle between none and block. Two global variables are utilized in this process - one for the menu button (to detect clicks) and one for the ul element (to control its display property).

var menuButton = document.getElementById("menuicon");
var menu = document.getElementById("navlink");


function handleMenuClick() {
  if (menu.style.display == none) {
    menu.style.display = "block";
  } else {
    menu.style.display = "none";
  }
}

menuButton.addEventListener("click", handleMenuClick);

...and so on...

javascript dom-events

Answer 1

Answer №1

One way to achieve this is by utilizing the setAttribute() method. It's important to remember to enclose 'none' in single quotes when implementing this solution.

var menuButton = document.getElementById("menuicon");
var menu = document.getElementById("navlink");

function menuclick() {
  if (menu.style.display === 'none') {
    menu.setAttribute("style", "display:block");
  } else {
    menu.setAttribute("style", "display:none");
  }
}

menuButton.addEventListener("click", menuclick);

Answer 2

One way to achieve this is by utilizing the setAttribute() method. It's important to remember to enclose 'none' in single quotes when implementing this solution.

var menuButton = document.getElementById("menuicon");
var menu = document.getElementById("navlink");

function menuclick() {
  if (menu.style.display === 'none') {
    menu.setAttribute("style", "display:block");
  } else {
    menu.setAttribute("style", "display:none");
  }
}

menuButton.addEventListener("click", menuclick);

Answer 3

Answer №2

If you want to control the visibility of menu items, it's better to utilize a css class rather than inline styles. Check out the Element.classList.toggle method for reference:

var menuButton = document.getElementById("menuicon");
var menu = document.getElementById("navlink");


function toggleMenu() {
  menu.classList.toggle("active");
}

menuButton.addEventListener("click", toggleMenu);

body {
  background-color: rgb(40, 40, 40);
  font-size: 16px;
  margin: 0 auto;
  font-family: helvetica, arial;
}
header {
  position: relative;
  background: linear-gradient(rgb(40, 40, 140), rgb(50, 50, 180));
  min-height: 40px;
  box-shadow: 0px 0px 5px black inset;
}
header h1 {
  position: relative;
  padding: 10px;
  font-style: italic;
  font-size: 1.2em;
  font-weight: bold;
  color: white;
}
#h1s {
  font-size: .6em;
}
img {
  position: absolute;
  top: 0px;
  right: 10px;
}
header ul {
  position: relative;
  display: none;
}
header ul.active {
  display: block;
}
header ul li {
  background-color: red;
  text-align: center;
  height: 20px;
  background-color: grey;
  box-shadow: 0px 0px 1px black inset;
}
header ul li a {
  text-decoration: none;
  color: white;
  line-height: 20px;
  font-size: .6em;
}

<div id="page">
  <header>
    <h1> Cole Pratt <span id="h1s"> No.2968615 </span> </h1>
    <img src="images/menuicon.png" alt="menuicon" width="40" id="menuicon" />
    <ul id="navlink">
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">bio</a></li>
    </ul>
  </header>
</div>

Answer 4

If you want to control the visibility of menu items, it's better to utilize a css class rather than inline styles. Check out the Element.classList.toggle method for reference:

var menuButton = document.getElementById("menuicon");
var menu = document.getElementById("navlink");


function toggleMenu() {
  menu.classList.toggle("active");
}

menuButton.addEventListener("click", toggleMenu);

body {
  background-color: rgb(40, 40, 40);
  font-size: 16px;
  margin: 0 auto;
  font-family: helvetica, arial;
}
header {
  position: relative;
  background: linear-gradient(rgb(40, 40, 140), rgb(50, 50, 180));
  min-height: 40px;
  box-shadow: 0px 0px 5px black inset;
}
header h1 {
  position: relative;
  padding: 10px;
  font-style: italic;
  font-size: 1.2em;
  font-weight: bold;
  color: white;
}
#h1s {
  font-size: .6em;
}
img {
  position: absolute;
  top: 0px;
  right: 10px;
}
header ul {
  position: relative;
  display: none;
}
header ul.active {
  display: block;
}
header ul li {
  background-color: red;
  text-align: center;
  height: 20px;
  background-color: grey;
  box-shadow: 0px 0px 1px black inset;
}
header ul li a {
  text-decoration: none;
  color: white;
  line-height: 20px;
  font-size: .6em;
}

<div id="page">
  <header>
    <h1> Cole Pratt <span id="h1s"> No.2968615 </span> </h1>
    <img src="images/menuicon.png" alt="menuicon" width="40" id="menuicon" />
    <ul id="navlink">
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">bio</a></li>
    </ul>
  </header>
</div>

Listening for events on an image does not change the visibility of an unordered list

Answer №1

Answer №2

Similar questions

Transfer PHP's uniqid() function to real-time using JavaScript with jQuery

It's not possible to add additional options to the select input in a react

Downloading Files from Your Cordova Application to Your Device

Incorporating post data into a Partial View

Display all elements on a webpage using Javascript without the need for scrolling

Using Angular routing without relying on a web server to load templates

Guide on making an active link the default setting upon the initial loading of a page with Angular 2

The correlation among the event loop, libuv, and the V8 engine

What is the best way to seamlessly transition layers from one location to another as the mouse exits and re-enters the window?

Trigger a function when a CSS animation reaches its completion

placeholder for dropdown selection in Vue.js version 2.0.0

Alter the content of a div depending on the values of three different elements

Tips for preventing automatic zoom on mobile devices

Ways to merge two Vue.js components

JavaScript code to toggle the navigation bar on mobile devices

Need the equivalent syntax of Import in Nodejs

Top method for showcasing animated images (HTML/CSS/JS)

Clearing LocalStorage and Cache upon initial loading in Next.js

Animated SVG Arrow Design

Following the recent update of Google Chrome, Sencha Touch experiences spinning issues