Changing class of button and display of div with JavaScript

Question

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 class="element-select-container">
<button id="but81" class="but81 redline" data-e="81"     type="button" name="">Doors</button>
<button id="but82" class="but82" data-e="82" type="button" name="">Windows</button>
<button id="but83" class="but83" data-e="83" type="button" name="">Facia</button>
<button id="but84" class="but84" data-e="84" type="button" name="">Guttering</button>

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

CSS

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

Can you add the CSS definitions, because nothing in your code relates to "bottom border line" - you could add the HTML too, since the problem may be with your combination of HTML and CSS not being correct for what you want to do — Bravo
– Bravo, Commented Mar 12, 2022 at 3:45
so what you're saying is, you won't add the relevant css or html? — Bravo
– Bravo, Commented Mar 12, 2022 at 3:47
see, the issue is, 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 - see how adding all relevant code made the issue crystal clear — Bravo
– Bravo, Commented Mar 12, 2022 at 3:55
ok ive added the html and css. It works. When i click another button in the same div the bottom border swaps.. but when i click another button in the div that is shown by clicking the original button then the border bottom stays when i go to the original div and click another button. i think the code is seeing the button pressed in the shown div as the active button. i want to only focus on the buttons in .element-select-container. I added 'active' to the first button class but it doesn't make a difference — James
– James, Commented Mar 12, 2022 at 3:56

Bravo · Accepted Answer · 2022-03-12 03:57:27Z

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 class="element-select-container">
<button id="but81" class="but81 redline" data-e="81"     type="button" name="">Doors</button>
<button id="but82" class="but82" data-e="82" type="button" name="">Windows</button>
<button id="but83" class="but83" data-e="83" type="button" name="">Facia</button>
<button id="but84" class="but84" data-e="84" type="button" name="">Guttering</button>

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

Collectives™ on Stack Overflow

Changing class of button and display of div with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related