Changing class of button and display of div with JavaScript-CodePudding

I have JavaScript to show/hide div on click. Inside that div are more buttons to show/hide PNGs.

I want the clicked button to have a bottom border line until another button in that div is clicked.

I have achieved this but each time I click on a button in the shown div the bottom border line stays on the button when I click the next button.

I've spent hours trying to fix this. please help

let wildCard = document.querySelectorAll(".element-select-container button");
for (let button of wildCard) {
  button.addEventListener('click', (e) => {
    const et = e.target;
    const active = document.querySelector(".active");
    let redline = (".redline");


    if (active) {

    active.classList.remove("redline");
      active.classList.remove("active");

      }

      et.classList.add("active");
      et.classList.add("redline");

      let allContent = document.querySelectorAll('.button-wrapper');

          for (let content of allContent) {

      if(content.getAttribute('data-e') === button.getAttribute('data-e')) {
        content.style.display = "block";

      }

      else {
        content.style.display = "none";

     }
     }
   });
}

HTML

<div >
<button id="but81"  data-e="81"     type="button" name="">Doors</button>
<button id="but82"  data-e="82" type="button" name="">Windows</button>
<button id="but83"  data-e="83" type="button" name="">Facia</button>
<button id="but84"  data-e="84" type="button" name="">Guttering</button>

<button id="but85"  data-e="85" type="button"   name="">Garage</button>
<button id="but86"  data-e="86" type="button"    name="">Steps</button>
</div>

CSS

.redline {
border-bottom: 2px solid red;
}

CodePudding user response：

The issue is, on first load, the first button is redline but not active - so, when you press a different button, the code to remove redline from active doesn't find active so redline isn't removed

simple fix

const active = document.querySelector(".active,.redline");

As follows

let wildCard = document.querySelectorAll(".element-select-container button");
for (let button of wildCard) {
  button.addEventListener('click', (e) => {
    const et = e.target;
    const active = document.querySelector(".active,.redline");


    if (active) {

    active.classList.remove("redline");
      active.classList.remove("active");

      }

      et.classList.add("active");
      et.classList.add("redline");

      let allContent = document.querySelectorAll('.button-wrapper');

          for (let content of allContent) {

      if(content.getAttribute('data-e') === button.getAttribute('data-e')) {
        content.style.display = "block";

      }

      else {
        content.style.display = "none";

     }
     }
   });
}

.redline {
border-bottom: 2px solid red;
}

<div >
<button id="but81"  data-e="81"     type="button" name="">Doors</button>
<button id="but82"  data-e="82" type="button" name="">Windows</button>
<button id="but83"  data-e="83" type="button" name="">Facia</button>
<button id="but84"  data-e="84" type="button" name="">Guttering</button>

<button id="but85"  data-e="85" type="button"   name="">Garage</button>
<button id="but86"  data-e="86" type="button"    name="">Steps</button>
</div>