Using javascript to modify an HTML element's style and onclick function without an ID-CodePudding

I'm trying to use userscript with Tampermonkey to modify some HTML elements on a webpage which don't contain id attributes.

I'm trying to re-enable some disabled buttons on a relatively basic javascript language learning game site. I'll change the style attribute so they look the same as regular buttons, and change the onclick value so they actually launch the game instead of doing nothing.

Now, I know how to do both of these things when I use inspect element on each one, and I've confirmed that it works. The problem arises when I try to write a userscript to do that for me - I've looked around and I can't seem to find a solution to the issue.

Here's the code for one of the buttons I want to change:

I want to change this:

<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;">&nbsp;Car Puzzle (2 pts)&nbsp;</label>

To this:

<label onclick="gotoPlayCarPuzzle();" style="width=100%;border:outset;font-size:14px;color:blue;">&nbsp;Car Puzzle (2 pts)&nbsp;</label>

I'm sure that if I could find out how to do it just for this one, I could do it for the others quite easily. They almost all follow the same format, and there are only three other buttons.

Some information that might help:

All of the disabled buttons have the same style attribute. If there's a way to find elements with the style attribute, that would probably be the way to go.
The buttons are accessed by a menu that closes when another element outside the menu is interacted with. Each time it's closed and re-opened, the attributes for the buttons are reset. This means the script will need to repeat.

Thanks in advance!

CodePudding user response：

All of the disabled buttons have the same style attribute If there's a way to find elements with the style attribute, that would probably be the way to go.

There is and it is. You want a querySelectorAll querying the style attribute.

let matched = document.querySelectorAll("label[style='border:outset;font-size:14px;background-color:darkgrey;color:white;']");

You could also potentially target the onclick attribute:

let matched = document.querySelectorAll("label[onclick='xgotoPlayCarPuzzle();']");

CodePudding user response：

Here is my solution:

function xgotoPlayCarPuzzle(event){
    let theElement=event.target;
  theElement.style.width="100%";
  theElement.style.backgroundColor="red";
}

<label onclick="xgotoPlayCarPuzzle(event);" style="border:outset;font-size:14px;background-color:darkgrey;color:white;">&nbsp;Car Puzzle (2 pts)&nbsp;</label>

CodePudding user response：

Maybe you just want to use the tag selector and modify its attributes after getting the element.

function playHook() {
    alert(1);
}
(function(){
    const eles = document.querySelectorAll("body > div > div > label")
    eles.forEach(item => {
        item.onclick = playHook;
        item.style.background = "blue";
    })
})();

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Selector</title>
</head>
<body>
    <div>
        <div>
            <label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;">&nbsp;Car Puzzle (2 pts)&nbsp;</label>
        </div>
        <div>
            <label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;">&nbsp;Car Puzzle (2 pts)&nbsp;</label>
        </div>
        <div>
            <label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;">&nbsp;Car Puzzle (2 pts)&nbsp;</label>
        </div>
        <div>
            <label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;">&nbsp;Car Puzzle (2 pts)&nbsp;</label>
        </div>
    </div>
</body>
</html>