What once worked is now broke

JavaScript
1

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";
});
2

I can find a <div> with id="cdetails", but cannot find anything with id="adetails".

BTW: are you aware that you are linking to js/about-us.js twice?

3 Likes
3

Hah! That’s what I changed. :roll_eyes:

I said I was a numpty.

Thanks, squire

2 Likes