How to add eventlistener to menu js?

Question

I am trying to add an event listener when a menu item is clicked.

Why is menu.value undefined when an item is clicked?

Code:

let menu = document.getElementById("myDropdown");
menu.addEventListener("click", generateMap);

function generateMap(event) {
  if (menu.value == "all") {
    console.log("all");
  } else if (menu.value == "a1") {
    console.log("a1");
  } else if (menu.value == "a2") {
    console.log("a2");
  }
}

user_11926970 · Answer

You are not using the proper HTML structure.

tag is a child of tag, and on that select tag you can attach the event listeners

let menu = document.getElementById("myDropdown");
menu.addEventListener("click", generateMap);

function generateMap(event) {
  if (menu.value == "all") {
    console.log("all");
  } else if (menu.value == "a1") {
    console.log("a1");
  } else if (menu.value == "a2") {
    console.log("a2");
  }
}

How to add eventlistener to menu js?

1 Answers