Question 10801 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How click a div with button role event in the same class multiple elements – Jquery

So I’m trying to auto-click every button in Instagram’s "hide story from" settings by console, and I tried this code :

for (let i = 0; i < 300; i++) {
  document.getElementsByClassName('wbloks_1')[i]
        .addEventListener('click', function (event) {
        });
}

unfortunately this doesn’t work anyone has a solution?
div element :

<div data-bloks-name="bk.components.Flexbox" class="wbloks_1" style="pointer-events: none; margin-right: 12px; flex-shrink: 0; align-items: center; flex-direction: row; justify-content: flex-end;"><div data-bloks-name="bk.components.Flexbox" class="wbloks_1" style="pointer-events: none;"><div data-bloks-name="bk.components.Flexbox" role="button" aria-label="Toggle checkbox" class="wbloks_1" style="pointer-events: none; display: none;"><div data-bloks-name="ig.components.Icon" class="wbloks_1" style="-webkit-mask-image: url(&quot;https://i.instagram.com/static/images/bloks/icons/generated/circle-check__filled__24-4x.png/219f67ac4c95.png&quot;); -webkit-mask-size: contain; background-color: rgb(0, 149, 246); flex-shrink: 0; width: 24px; height: 24px;"></div></div><div data-bloks-name="bk.components.Flexbox" role="button" aria-label="Toggle checkbox" class="wbloks_1" style="pointer-events: none; display: none;"><div data-bloks-name="ig.components.Icon" class="wbloks_1" style="-webkit-mask-image: url(&quot;https://i.instagram.com/static/images/bloks/icons/generated/circle-check__filled__24-4x.png/219f67ac4c95.png&quot;); -webkit-mask-size: contain; background-color: rgba(0, 149, 246, 0.3); flex-shrink: 0; width: 24px; height: 24px;"></div></div><div data-bloks-name="bk.components.Flexbox" role="button" aria-label="Toggle checkbox" class="wbloks_1" style="pointer-events: none;"><div data-bloks-name="ig.components.Icon" class="wbloks_1" style="-webkit-mask-image: url(&quot;https://i.instagram.com/static/images/bloks/icons/generated/circle__outline__24-4x.png/2f71074dce25.png&quot;); -webkit-mask-size: contain; background-color: rgb(54, 54, 54); flex-shrink: 0; width: 24px; height: 24px;"></div></div></div></div>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 
    document.querySelectorAll('.wbloks_1').forEach(button => button.click());

    Thanks @Andy Delay:

    document.querySelectorAll('.wbloks_1').forEach((button, index) => {
  setTimeout(() => {
    button.click();
  }, index * 1000); // Change the delay time (in milliseconds) as needed
});

  2. 0

    If you want to add a delay (as per your deleted comment) you could use setTimeout to call a function on all of the buttons (event delegation) after a certain time (in milliseconds).

    To mock this effect here I’ve added a button container that logs the text content of each button when it’s clicked.

    The delayClick function accepts an array of buttons (from the query selection), grabs the first one, clicks it, and then setTimeout is called after a second calling the function again with the rest of the buttons. When there are no buttons left in the array the function returns.

    const container = document.querySelector('.container');
const buttons = document.querySelectorAll('.wbloks_1');

container.addEventListener('click', handleClick);

function handleClick(e) {
  if (e.target.matches('button')) {
    console.log(e.target.textContent);
  }
}

function delayClick(buttons) {
  if (!buttons.length) return;
  const [head, ...tail] = buttons;
  head.click();
  setTimeout(delayClick, 1000, tail);
}

delayClick(buttons);
    <section class="container">
  <button class="wbloks_1">Button 1</button>
  <button class="wbloks_1">Button 2</button>
  <button class="wbloks_1">Button 3</button>
  <button class="wbloks_1">Button 4</button>
  <button class="wbloks_1">Button 5</button>
</section>

    Additional documentation

    Login or Signup to reply.
  3. 0

    Put all the elements into an array and remove the first element. Click it, call the function again until you have no elements left. Basic queue.

    const queueClick = () => {
  // get all of the buttons into an array
  const buttons = Array.from(document.querySelectorAll('.wbloks_1'));

  const next = () => {
    // get the next button from start of the array
    const button = buttons.shift();

    // click it
    button.click()

    // if we have ones remaining, do it again in 6 seconds
    if (buttons.length) window.setTimeout(next, 6000);
  }
  
  // start the first iteration
  next();
}

queueClick();
    <input type="checkbox" class="wbloks_1">
<input type="checkbox" class="wbloks_1">
<input type="checkbox" class="wbloks_1">
<input type="checkbox" class="wbloks_1">
<input type="checkbox" class="wbloks_1">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search