Script tampermonkey

JavaScript
1 
(function() {
    'use strict';

    // Function to automatically click the button.
    function autoClickButton() {
        var targetButton = document.querySelector('button.css-1p94a1z');

        if (targetButton !== null) {
            var buttonText = targetButton.querySelector('.css-vww2j2').textContent;
            if (buttonText === 'Únete a rain') {
                targetButton.click();
                console.log('DONE'); // Print "DONE" to the console
            }
        }
    }

    // Wait for the document to be ready before attempting the click.
    document.addEventListener('DOMContentLoaded', function() {
        // Execute the function with a slight delay to ensure the button is present in the DOM.
        setTimeout(autoClickButton, 1000); // Adjust the delay as needed.
    });
})();

i got a probleme with this script

The button i want to click automatic is this when i inspect element he show me that

<button class="css-1p94a1z" type="button"> <div class="css-vww2j2">Únete a rain</div> </button>

but he doesnt click can somebody help me to fix it pls is a dynamic button who appears every :28 and diseapears at :30 and same to 58 at :00

ChatGPT do me the script over because i dont know nothing about javascript .

If somebody can help me , the website is Clash.gg , and the " button " join rain appears on chat at :28 and :58

pls help im on for now 5 days and i cant fix it i realy start to feel bad , and ty

2 
// ==/UserScript==

(function() {
    'use strict';

    // Function to automatically click the dynamic button inside containers.
    function autoClickDynamicButtonInsideContainers() {
        var containerSelectors = [
            '.css-114jn39 .css-umwchj .css-dhj7ib .css-13wylk3 .group.css-jg65kg .css-1r11nll',
            '.css-n9pdg .css-1dkhfxf .css-p7bunm .css-1wm6aua .css-ih2f4a .css-198fqdy',
            '.css-1dkhfxf .css-p7bunm .css-1wm6aua .css-ih2f4a .css-198fqdy',
            '.css-p7bunm .css-1wm6aua .css-ih2f4a .css-198fqdy',
            '.css-1wm6aua .css-ih2f4a .css-198fqdy',
            '.css-ih2f4a .css-198fqdy'
        ];

        containerSelectors.forEach(function(containerSelector) {
            var container = document.querySelector(containerSelector);
            if (container) {
                var targetButton = container.querySelector('button.css-1p94a1z div.css-vww2j2');
                if (targetButton) {
                    targetButton.click();
                    console.log('Dynamic button inside container clicked on Clash.gg');
                }
            }
        });
    }

    // Execute the function with a slight delay to ensure the containers and buttons are present in the DOM.
    setTimeout(autoClickDynamicButtonInsideContainers, 2000); // Adjust the delay as needed.
})();

Sorry , i have try to make a new one because chatGPT say me to add the " Chat Box " where appears the button , and the box where apears the button , and the button , because aparently is some Conteners so he make the script created on it , but he still doesnt work i realy need help with this

3

This is a late night post, so don’t know if this will work. A bit of a refactor.

Note you should have a look at a post by James Hibbard on a similar topic
https://www.sitepoint.com/community/t/autoclick-on-two-consecutive-buttons/405121/2

(function() {
  // ==UserScript==
  // @run-at    document-idle
  // ==/UserScript==

  window.addEventListener('load', () => {
    
    // function now takes two arguments
    // the containerSelectors which should be a string
    // and the buttonSelector which should also be a string
    const triggerTargetButtons = (containerSelectors, buttonSelector) => {
      
      const containerElements = document.querySelectorAll(containerSelectors);
  
      // if no selected elements return early
      if (containerElements === null) return;
      
      containerElements.forEach((container) => {
        const button = container.querySelector(buttonSelector);
        
        if (button !== null) button.click();
      });
    }
    
    const containerSelectors = [
      '.css-114jn39 .css-umwchj .css-dhj7ib .css-13wylk3 .group.css-jg65kg .css-1r11nll',
      '.css-n9pdg .css-1dkhfxf .css-p7bunm .css-1wm6aua .css-ih2f4a .css-198fqdy',
      '.css-1dkhfxf .css-p7bunm .css-1wm6aua .css-ih2f4a .css-198fqdy',
      '.css-p7bunm .css-1wm6aua .css-ih2f4a .css-198fqdy',
      '.css-1wm6aua .css-ih2f4a .css-198fqdy',
      '.css-ih2f4a .css-198fqdy'
    ];
    
    triggerTargetButtons(
      // join the selectors into a string using a comma separator
      containerSelectors.join(','),
      'button.css-1p94a1z div.css-vww2j2'
    )
  });
})();

Instead of looping and querySelecting multiple times, you can select multiple elements using a comma to separate the elements in one string e.g.

document.querySelectorAll('.button01, .button02, .button03')

This will return a nodelist.

I have used Array.join to join your array of selectors just like this.

1 Like
4

Hi @pronet75042, one thing to note aside from the logic is that CSS classes like .css-1p94a1z are looking very much like automatically generated ones – either at build time (e.g. for a react or angular application bundle) or even at runtime. So these class names may change at any time and are not candidates for reliable selectors.

You might look for something specific to the layout instead though, such as main > button:first-child (just an example though!). Or, if you can’t identify such a selector, iterate over all buttons and check their text content… not ideal of course, but still more robust I suppose:

function querySelectorAndText (selector, text) {
  const elements = document.querySelectorAll(selector)

  return Array.from(elements).find(
    element => element.textContent.includes(text)
  )
}

const button = querySelectorAndText('button', 'Únete a rain')
3 Likes