Adding an event handler to the menu buttons

In the review of my new layout and the simplification of the CSS I noticed that the links only triggered when the cursor was over the text. It would be better if the link were followed if the cursor was anywhere over the button.

Update: Changing the CSS file so that the li a tag to include a display: block (so that it takes the whole width of the element)

The cursor style needs to be set for the button.

The button is a li tag

The li tag is styled as a button. The event handler is added to link the button to a URL.

The button/li tag has a cursor added and an event. A seperate handler would need to be added to each li element.

To add an event to each menu item would require a handler for each.

Function to retrieve button actions and set events

What I need to do is to get the links that I have set for the buttons and then set the eventhandlers for each.

The code taken from the accordian example:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

Links

• HTML DOM addEventListener() Method
• Documentation - where I tried this first
• CSS Shadow - a place where I have a button
• The button in CSS
• HTML Collections

External Sources

• HTML DOM addEventListener() Method - an event on the whole menu button would be better
• getElementByClassName - 🔗