Custom made classes and/or IDs

Ask the Community Customization
4

I think I might be able to run javascript in the embedding document (www.UFPA.ca/burnout3) which the ElfSight form (that is also embedded in said page) may be able to access anyway.

Also, I stumbled upon a routine that I think will allow me to capture various elements in the form, and assign classes and IDs to them. I’ve tested it and it works. But it alters the HTML of the form itself (or I think it does). So, I was hoping to get an OK from the developers before I implement it, on the off chance that this may cause chaos for ElfSight.

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing grabbing unidentifiable divs and giving them unique selectors</title>
</head>
<body>
<div>
00001 This div has nothing special except a number 00001 and a symbol ****
</div>
<div>
00002 This div has nothing special except a number 00002 and a symbol $$$$
</div>
<div>
00003 This div has nothing special except a number 00003 and a symbol %%%%
</div>
<div>
00004 This div has nothing special except a number 00004 and a symbol &&&&
</div>
</body>
</html>
<script>
function contains(selector, text) {
var elements = document.querySelectorAll(selector);
return Array.prototype.filter.call(elements, function (element) {
return RegExp(text).test(element.textContent);
});
}
let itisFound = contains("div", "&&&&"); // find "div" that contain "&&&&"
let itisFixed = itisFound[0];
console.log(itisFixed.innerText);
itisFixed.setAttribute("class", "FirstFixedDiv");
let itisShown = document.querySelector(".FirstFixedDiv");
itisShown.innerText = "We have changed the HTML document with Javascript!";
console.log(itisFound[0].innerText);
console.log(itisShown.innerText);
</script>
2 Likes