Steps for triggering a click event on a div with a button role within a class containing multiple elements

Question

Steps for triggering a click event on a div with a button role within a class containing multiple elements

Can anyone help me figure out how to auto-click every button in Instagram's "hide story from" settings using console? I tried the following code:

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

Unfortunately, this code isn't working. Does anyone have a solution? Here is the HTML 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>

javascript html jquery css

Answer 1

Answer №1

Place all the items into an array and remove the initial item. Click on it, trigger the function again until there are no more elements present. This is a simple queue implementation.

const executeQueue = () => {
  // gather all the buttons in an array
  const buttons = Array.from(document.querySelectorAll('.wbloks_1'));

  const proceed = () => {
    // retrieve the next button from the beginning of the array
    const button = buttons.shift();

    // click on it
    button.click()

    // if there are still elements remaining, re-execute after 6 seconds
    if (buttons.length) window.setTimeout(proceed, 6000);
  }
  
  // initiate the first iteration
  proceed();
}

executeQueue();

<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">

Answer 2

Place all the items into an array and remove the initial item. Click on it, trigger the function again until there are no more elements present. This is a simple queue implementation.

const executeQueue = () => {
  // gather all the buttons in an array
  const buttons = Array.from(document.querySelectorAll('.wbloks_1'));

  const proceed = () => {
    // retrieve the next button from the beginning of the array
    const button = buttons.shift();

    // click on it
    button.click()

    // if there are still elements remaining, re-execute after 6 seconds
    if (buttons.length) window.setTimeout(proceed, 6000);
  }
  
  // initiate the first iteration
  proceed();
}

executeQueue();

<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">

Answer 3

Answer №2

For implementing a delay feature (mentioned in your previous comment), you can utilize setTimeout to trigger a function on all buttons through event delegation after a specified time period (measured in milliseconds).

In a simulated scenario, I've set up a button container that logs the text content of each clicked button.

The delayClick function takes an array of buttons (retrieved using query selection), clicks the first one, and then schedules another invocation with the remaining buttons via setTimeout after a second. This process continues until there are no more buttons in the array.

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 resources

Answer 4

For implementing a delay feature (mentioned in your previous comment), you can utilize setTimeout to trigger a function on all buttons through event delegation after a specified time period (measured in milliseconds).

In a simulated scenario, I've set up a button container that logs the text content of each clicked button.

The delayClick function takes an array of buttons (retrieved using query selection), clicks the first one, and then schedules another invocation with the remaining buttons via setTimeout after a second. This process continues until there are no more buttons in the array.

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 resources

Answer 5

Answer №3

const widgets = document.querySelectorAll('.wbloks_1');
widgets.forEach(button => button.click());

Shout out to @Andy for the help! Customize Delay:

document.querySelectorAll('.wbloks_1').forEach((button, index) => {
  setTimeout(() => {
    button.click();
  }, index * 1000); // Adjust the delay time (in milliseconds) based on your needs
});

Answer 6

const widgets = document.querySelectorAll('.wbloks_1');
widgets.forEach(button => button.click());

Shout out to @Andy for the help! Customize Delay:

document.querySelectorAll('.wbloks_1').forEach((button, index) => {
  setTimeout(() => {
    button.click();
  }, index * 1000); // Adjust the delay time (in milliseconds) based on your needs
});

Steps for triggering a click event on a div with a button role within a class containing multiple elements

Answer №1

Answer №2

Answer №3

Similar questions

Working with AngularJS: Implementing a Service in a Controller

Implementing Browser Back or Back button in AngularJS

A compilation of category listings derived from two arrays of objects that share a common parent ID

Vue warning: Issue encountered in created hook - Attempting to access property 'get' of an undefined variable is causing a TypeError

Ways to adjust the brightness of any color when hovered over

The dynamic trio: Ajax, PHP, and MySql

Ways to style specific dates on a datepicker?

Default scrollbars in Chrome are designed to seamlessly blend in

Timeout feature for image slider in Angular JS

What are some ways to create a traditional HTML form submission and incorporate jQuery solely for the callbacks?

Attempting to forward an image in a node-js/express application

Return to the initial stage of a multistep process in its simplest form following a setTimeout delay

Disabling animations in Reactjs with CSSTransition and Group Transition

When utilizing customize-cra to modify antd less variables, it results in the generation of numerous redundant CSS files during the build

in vuejs, a legendary row is added to the table every 25 or 50 records

Looking for a solution to my issue - my for loop is looping more times than it should

Angular is not properly integrating Bootstrap features

Repair the navigation bar once it reaches the top of the screen using ReactJS

HTML and JavaScript - Facing issues rendering HTML content during the conversion process from Markdown format

utilize console.log within the <ErrorMessage> element