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;"> Car Puzzle (2 pts) </label>
To this:
<label onclick="gotoPlayCarPuzzle();" style="width=100%;border:outset;font-size:14px;color:blue;"> Car Puzzle (2 pts) </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:
Thanks in advance!
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();']");
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;"> Car Puzzle (2 pts) </label>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;"> Car Puzzle (2 pts) </label>
</div>
<div>
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
</div>
<div>
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
</div>
<div>
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
</div>
</div>
</body>
</html>