Hacking Adventures: Automating Button Click

Sometimes you may encounter annoying training content that forces you to watch a section before you can explicitly advance to the next one. Never understood why I have to do this or sit for long trainings altogether if I already know the answers and can pass the naive quizzes. Usually, a web button to continue gets enabled after you watch a video or after some time elapses.

With some investigative work and low-code JavaScript, you can easily “automate” the process to some extent, such as until it’s time for the quiz, as follows:

  1. The trick is to find the id of the button and what makes it enabled/disabled. In the Edge browser, right click the “button” and then click Inspect. This will open the Dev Tools and you’ll will see the button HTML definition. You can right-click it on the HTML code and then click Copy OuterHTML to paste it in Notepad to inspect it. In my case, the element id is “button-next”. When the button is disabled, the app adds an attribute disabled as follows:
    <button … disabled=”” type=”button” id=”button-next”>…</button>
  2. In the browser Dev Tools Console (F12), copy and paste the following JavaScript code, and then press Enter (note that you must execute allow pasting before you can copy and paste code for the first time as the Console will inform you):
    function checkAndClick() {
    const targetElement = document.getElementById('button-next'); // Get the element by ID
    
    if (targetElement) { // Check if the element exists
    if (!targetElement.hasAttribute('disabled')) { // Check if it does NOT have the 'disabled' attribute
       targetElement.click(); // Simulate a click
       console.log('Element clicked!');
    } else {
      console.log('Element is disabled.');
    }
    } else {
        console.log('Element not found.');
    }
    }
    // Set an interval to run the function every 2 seconds
    const intervalId = setInterval(checkAndClick, 2000);
    // clearInterval(intervalId); Disable the timer when no longer needed
    

    This code watches every two seconds if the disabled attribute is removed from the button, in which case it “clicks” the button to advance the content. Hope this will save you precious time for more productive work. Happy training!