How can I make a function that clicks in every child element of a div at the same time? - Jquery

Luca
August 13, 2022
263 views
3 votes
3 Answers

I have a code like this:

<div class="menuMesa">
                <button class="chamad" id="chamad6">D6</button>
                <button class="chamad" id="chamad20">D20</button>
                <button class="chamad" id="chamad8">D8</button>
                <button class="chamad" id="chamad10">D10</button>
                <button class="chamad" id="chamad4">D4</button>
                <button class="chamad" id="chamad12">D12</button>
            </div>

Then there is another button, and I want to make a function that when its clicked it clicks in every button inside ".menuMesa". How can I do it?

Answers

Use .click function:

document.querySelectorAll(".chamad").forEach(e => {
  e.onclick = function() {
    console.log("clicked: " + e.id);
  }
});

document.querySelector("#clickall").onclick = function() {
  document.querySelectorAll(".chamad").forEach(e => e.click())
}

<div class="menuMesa">
  <button class="chamad" id="chamad6">D6</button>
  <button class="chamad" id="chamad20">D20</button>
  <button class="chamad" id="chamad8">D8</button>
  <button class="chamad" id="chamad10">D10</button>
  <button class="chamad" id="chamad4">D4</button>
  <button class="chamad" id="chamad12">D12</button>
</div>
<button id="clickall">
  Click All.
</button>

You could do it like this:

with querySelector & querySelectorAll with listening on click_event

document.querySelector('.clickAll').addEventListener('click', () => {
  document.querySelectorAll('.chamad').forEach(div => {
    div.click();
  })
})
//just for demo
function popup(x){
  alert('you've clicked on '+x);
}

<div class="menuMesa">
  <button class="chamad" onclick='popup("you clicked on D6")' id="chamad6">D6</button>
  <button class="chamad" onclick='popup("you clicked on D20")' id="chamad20">D20</button>
  <button class="chamad" onclick='popup("you clicked on D8")' id="chamad8">D8</button>
  <button class="chamad" onclick='popup("you clicked on D10")' id="chamad10">D10</button>
  <button class="chamad" onclick='popup("you clicked on D4")' id="chamad4">D4</button>
  <button class="chamad" onclick='popup("you clicked on D12")' id="chamad12">D12</button>
</div>
<hr>
<button class='clickAll'>click on All divs</button>

You do that you can use html button attribute — onclick
So first you need to create a script tag, and then we have a function called buttonClicked ( you can rename it with any name ) and then set the onclick attribute to “buttonClicked”

So your code might be like this:

<div class="menuMesa">
     <button class="chamad" id="chamad6" onclick=“click(‘D6’)”>D6</button>
     <button class="chamad" id="chamad20" onclick=“click(‘D20’)”>D20</button>
     <button class="chamad" id="chamad8" onclick=“click(‘D8’)”>D8</button>
     <button class="chamad" id="chamad10" onclick=“click(‘D10’)”>D10</button>
     <button class="chamad" id="chamad4" onclick=“click(‘D4’)”>D4</button>
     <button class="chamad" id="chamad12" onclick=“click(‘D12’)”>D12</button>
     <button onclick=“clickAll()”>Click To Click All</button>
</div>
<script>
     function click(id){
          console.log(“You clicked “ + id)
     }
     
     function clickAll(){
          Array.from(document.querySelectorAll(“.chamad”)).forEach((item) => { item.click(); })
     }
</script>

Please signup or login to give your own answer.

Click here to cancel reply.

How can I make a function that clicks in every child element of a div at the same time? – Jquery

Answers