Hi fellow campers,
Here’s what I’m trying to achieve. On this pen, I’m aiming at having both the background-color for the body, which can’t be selected with a :checked pseudo class,… and trying to put the background on all pre tags.
So far, the code is only working on the first pre tag, and the body.
With this code below.
document.getElementById("dark").addEventListener("click", letItBeLight);
function letItBeLight() {
document.querySelector("body").classList.toggle("darken");
document.querySelector("pre").classList.toggle("codeblock");
}
That’s how I have it at the moment on the pen. However, if I change the querySelector, to querySelectorAll(“pre”)… or querySelectorAll(div.code-doc > pre), it breaks and it doesn’t change the background of the pre element.
What am I missing?
EDIT:
Yeah… I think I fixed it.
document.getElementById("dark").addEventListener("click", letItBeBody);
function letItBeBody() {
document.querySelector("body").classList.toggle("darken");
}
var dark = document.getElementById("dark").addEventListener("click", letItBeLights);
var pres = document.getElementsByTagName("pre");
function letItBeLights() {
for (var i = 0; i < pres.length; i++) {
pres[i].classList.toggle("codeblock");
}
}
What I needed to do was to loop through the pre tag and add a class to each element. I also separate the two event listeners; even though I’m using the same ID.