Question 256440 in Html Question posted in
Some basic documentation can be found here.

Html – How can I click a button and have several other buttons get clicked?

I’m very new and just a programming enthusiast so I don’t know a lot. I’m building a site where I need to click a button and then have a bunch of other buttons appear clicked. The other buttons don’t have any functions when clicked, it’s just the change of CSS class to appear "clicked".

So in summary, I need to click the first button, and then on the other side of the page I have 125 buttons which I need to appear "clicked" as well (not all 125, just some). And then when I "unclick" the first button, then they all "unclick" also. It’s like toggling some of the buttons with just one.

I have tried any way I know of changing the class of the second buttons when I click the first one. I have tried something like this selecting each individual button by the ID:

const gridTriangleOne = document.querySelector('.gridTriangleOne');
const numberTest = document.getElementById('111');

gridTriangleOne.addEventListener('click', myFunction); 

function myFunction() {
numberTest.classList.add('active2');    
};

I have tried something like this:

const gridTriangleOne = document.querySelector('.gridTriangleOne');
const triangleOne = document.querySelectorAll('.triangleOne');;

gridTriangleOne.addEventListener('click', () =>
    triangleOne.forEach(triangleOne => {
        triangleOne.classList.toggle('active');
    })
);

or even a different variation of the above with add instead of toggle. Nothing really works. Thanks for the help.

Tags:

3

Answers


  1. 0

    Here’s the shortest, most efficient way to do it. Hope this helps!

    document.querySelector(".clickme").addEventListener("click", function() {
  const allPoorElements = document.getElementsByClassName("click");
  const hasClass = allPoorElements[0].classList.contains("clicked");
  for (let i = 0; i < allPoorElements.length; i++) {
    allPoorElements[i].classList.toggle("clicked", !hasClass);
  }
});
    .clicked {background-color: #4CAF50;} .clicked, .clickme, .click { background-color: #4CAF50; border: none; color: white; padding: 16px 32px; font-size: 16px; } .clicked { background-color: lightgreen; border: none; color: black; padding: 16px 32px; font-size: 16px; }
    <button class="clickme">clickme</button>

<button class="click">1</button>
<button class="click">2</button>
<button class="click">3</button>
<button class="click">4</button>

    It never hurts to try different approaches and see what works best for your situation.

    Login or Signup to reply.
  2. 0

    this is just a little cleaner and takes out some unneeded code from the first answer.

    document.querySelector(".clickme").addEventListener("click", function() {
  const allPoorElements = document.getElementsByClassName("click");  
  for (let i = 0; i < allPoorElements.length; i++) {
    allPoorElements[i].classList.toggle("clicked");
  }
});
    .clicked {background-color: #4CAF50;} .clicked, .clickme, .click { background-color: #4CAF50; border: none; color: white; padding: 16px 32px; font-size: 16px; } .clicked { background-color: lightgreen; border: none; color: black; padding: 16px 32px; font-size: 16px; }
    <button class="clickme">clickme</button>

<button class="click">1</button>
<button class="click">2</button>
<button class="click">3</button>
<button class="click">4</button>
    Login or Signup to reply.
  3. 0 
    const gridTriangleOne = document.querySelector('.gridTriangleOne');
const triangleOne = document.querySelectorAll('.triangleOne');;


const toggleClass = () => {
    triangleOne.forEach(triangleOne => {
        triangleOne.classList.toggle('active');
    })
}

gridTriangleOne.addEventListener('click', toggleClass);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search