Show and Hide multiple Divs based on click-CodePudding

Hey there i have this code that needs to hide and show divs based on the ID. Which works but the issue is i need to be able to hide other DIVS on the page with the same ID.

I know ID's are suppose to be unique but when I try to use querySelectorAll my console says

Uncaught TypeError: Cannot set properties of undefined (setting 'display')"

Uncaught TypeError: Cannot read properties of undefined (reading 'className')

Im also having a hard time just having the first tab only show, right now all content shows until a button is clicked.

EDIT: I found a solution wrapping around the container elements, its not the ideal solution in case something gets added down the road but it works.

Would still love to see a solution to learn from but thanks for those who helped.

<div >
  <ul  id="tab">
    <li  id="tabs1" onclick="showStuff('IV')">Ivs</li>
    <li  id="tabs2" onclick="showStuff('Injection')">Injections</li>
    <li  id="tabs3" onclick="showStuff('NAD')">NAD</li>
  </ul>

  <script type="text/javascript">
    // Get the tab element
    var btnContainer = document.getElementById("tab");

    // Get all buttons inside with tabbutton
    var btns = btnContainer.getElementsByClassName("tabButton");

    // Loop through the buttons and add the active class to the current/clicked button
    for (var i = 0; i < btns.length; i  ) {
      btns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className  = " active";
      });
    }

    // Toggle displays
    function showStuff(id) {
      document.getElementById("IV").style.display = "none";
      document.getElementById("Injection").style.display = "none";
      document.getElementById("NAD").style.display = "none";
      document.getElementById(id).style.display = "block";
    }
  </script>
</div>

CodePudding user response：

IDs must be unique. Instead, give the elements that should be shown/hidden together the same CSS class. Then you can query for all the elements with that class and show/hide them.

EXAMPLE:

let foos = document.querySelectorAll(".foo")
document.querySelector("button");addEventListener("click", function() {
  foos.forEach(function(el){
    el.classList.toggle("hidden");
  });
});

.hidden { display:none; }

<button>Toggle</button>
<div >foo</div>
<div >fooBar</div>
<div >foo</div>
<div >fooBar</div>
<div >foo</div>
<div >fooBar</div>
<div >foo</div>
<div >fooBar</div>
<div >foo</div>

CodePudding user response：

Cause of Bug :-

When your click handler run for first time and search for tags containing an active class, gets an empty array because the html has no tag with active class.

Now then

var current = [];
current[0] = undefined; 
current[0].className =(undefined).className;

//and the console is showing you this error.
//Uncaught TypeError:
//Cannot read properties of undefined (reading 'className')

Solution :-

Just add a active class mannually to any one of the li tag. Like this :-

<ul  id="tab">
    <li  id="tabs1" onclick="showStuff('IV')">Ivs</li>
    <li  id="tabs2" onclick="showStuff('Injection')">Injections</li>
    <li  id="tabs3" onclick="showStuff('NAD')">NAD</li>
</ul>