I have a problem with my JS. It used to work but I’m now I’m getting an uncaught type error. I don’t see why cs would be null and I don’t understand what has changed. I’m probably being a numpty.
On this page: htt ps://www.martinfa rrell.o rg/ab out.php if you click on one of the years under the “Clients” heading, it should display a list but instead I get:
about-us.js:4 Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll')
at hideAll (about-us.js:4:17)
at about-us.js:17:1
This is the JS:
function hideAll(p) {
const cs = document.getElementById(p);
const ss = cs.querySelectorAll("div");
for (let s of ss)
s.style.display = "none";
}
function recolorAll(p) {
const cs = document.getElementById(p);
const ss = cs.querySelectorAll("button");
for (let s of ss)
s.style.color = "#00A7CE";
}
hideAll("cdetails"); // hide all clients
hideAll("adetails"); // hide all associates
// clients event listener
document.querySelector("#clients").addEventListener("click", function(e) {
const target = e.target;
if (target.matches) {
if (!target.matches("[data-show]"))
return;
}
hideAll("cdetails");
recolorAll("clients");
document.querySelector(target.dataset.show).style.display = "block";
target.style.color = "#D74022";
});
// associates event listener
document.querySelector("#associates").addEventListener("click", function(e) {
const target = e.target;
if (target.matches) {
if (!target.matches("[data-show]"))
return;
}
hideAll("adetails");
recolorAll("associates");
document.querySelector(target.dataset.show).style.display = "block";
target.style.color = "#D74022";
});