How to change the class of an HTML element on a website-CodePudding

I'm studying on a website that reads with a super slow TTS the questions and answers and you can only skip to the next question when the TTS is done. I found that the button has a "nolink" class and that if i change it manually to a "link" class, i can answer the question right away.

I tried to search online how to make a tampermonkey script that keeps the button on the "link" class but none of what i have tried works and i don't have much knowledge with html or js. I also tried to edit the .js of the website without much success either.

I'm looking for any solution that allows me to change the variable without editing the html every question if it is even possible.

CodePudding user response：

Tampermonkey is a browser extension that allows you to execute custom JavaScript code on websites. To change the class of a button, you can use JavaScript. Here's a simple Tampermonkey script that changes the nolink class to link:

// ==UserScript==
// @name         Skip TTS
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Changes the class of the button to "link"
// @author       You
// @match        YOUR_WEBSITE_URL
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // select the button by class name
    var button = document.querySelector(".nolink");

    // check if button exists
    if (button) {
        // change the class name to "link"
        button.className = "link";
    }
})();

Replace YOUR_WEBSITE_URL with the URL of the website you want to run the script on. To install the script, follow these steps:

Install Tampermonkey extension in your browser.
Click on the Tampermonkey icon and select "Create a new script".
Copy and paste the code into the new script.
Save the script and reload the website.

This should change the class of the button to link and allow you to skip the TTS.

CodePudding user response：

I think Eyebe Eloundou Joël Cédric's answer does a good job but doesn't get all the possible edge cases. For example, the script will not work if the site uses React and the HTML is created at runtime.

You'll want to only run the code once the element is created. In my userscripts, I use an adapted version of this answer. This is the code I'd use instead:

// ==UserScript==
// @name         Skip TTS
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Changes the class of the button to "link"
// @author       You
// @match        YOUR_WEBSITE_URL
// @grant        none
// ==/UserScript==

// https://stackoverflow.com/a/57395241/13376511
function waitForEl(sel) {
    return new Promise((resolve, reject) => {
        var observer = new MutationObserver(function(mutations) {
            if (document.querySelector(sel) !== null) {
                observer.disconnect();
                resolve();
            }
        });
        observer.observe(document.body, {childList: true, subtree: true});
    });
}

(async function() {
    'use strict';

    // select the button by class name
    await waitForEl('.nolink');
    var button = document.querySelector(".nolink");
    button.className = "link";
})();

This will make sure the button is only changed once it exists, and it will wait for the button to start existing.

If you're adding this script to Tampermonkey, remember to change the YOUR_WEBSITE_URL in

// @match        YOUR_WEBSITE_URL

with the URL of the website you want to run the script on.