How can I get an EventListener on a Select dropdown using a loop to work as expected-CodePudding

I have some HTML tabs which use radio buttons to control them. However I am using a select drop down menu with some javascript to control them on mobile screen sizes.

// Get select element for mobile navigation
const select = document.getElementById("location");

// Event listener for selecting tabs event for mobile
select.addEventListener("change", (e) => {
  const target = e.target.value;
  const venueTabs = document.querySelectorAll(".tabs__radio");
  for (let i = 0; i < venueTabs.length; i  ) {
    if (venueTabs[i].id === target) {
      venueTabs[i].setAttribute("checked", "checked");
      console.log(venueTabs[i], target);
    } else if (venueTabs[i].id !== target) {
      venueTabs[i].removeAttribute("checked");
    }
  }
});

My eventListener seems to work and is logging out what is expected. It compares the tab div id to the event target.

However this only seems to work when I test each select option twice, on the 3rd attempt the tabbed content disappears (css switches to display: none).

I can't seem to work out what is causing the error.

I have set up a code sandbox with my code https://codesandbox.io/s/nice-ramanujan-2yq1r?file=/src/index.js to help debug it. If the drop down menus isn't showing, you may have to view it for mobile/ below 700px wide & it'll display the select drop down menu.

Can anyone help identify what is causing this bug? I previously had hard coded the EventListener that worked perfectly, it looked like this

select.addEventListener("change", (e) => {
  const target = e.target;
  const tabone = document.getElementById("tab0");
  const tabtwo = document.getElementById("tab1");
  const tabthree = document.getElementById("tab2");
  const tabfour = document.getElementById("tab3");

  if (target.value === "tab0") {
    tabtwo.removeAttribute("checked");
    tabthree.removeAttribute("checked");
    tabfour.removeAttribute("checked");
    tabone.setAttribute("checked", "checked");
  } else if (target.value === "tab1") {
    tabthree.removeAttribute("checked");
    tabfour.removeAttribute("checked");
    tabone.removeAttribute("checked");
    tabtwo.setAttribute("checked", "checked");
  } else if (target.value === "tab2") {
    tabfour.removeAttribute("checked");
    tabone.removeAttribute("checked");
    tabtwo.removeAttribute("checked");
    tabthree.setAttribute("checked", "checked");
  } else if (target.value === "tab3") {
    tabone.removeAttribute("checked");
    tabtwo.removeAttribute("checked");
    tabthree.removeAttribute("checked");
    tabfour.setAttribute("checked", "checked");
  }
});

However it's not dynamic enough to take any number of tabs that may exist.

CodePudding user response：

This doesn't need any looping over all the radio buttons to begin with - just select the one element you want to set checked via its id:

select.addEventListener("change", (e) => {
  const target = e.target.value;
  const venueTab = document.querySelector("#" target);
  venueTab.checked = true;
});