Question 236423 in Html Question posted in
Some basic documentation can be found here.

Uncaught TypeError: Cannot read properties of null (reading 'scrollHeight') at HTMLButtonElement

This message appear at the log of Chrome.

I’ve tried to use onclick= property on button tags, but continue with the same error

My code:

window.addEventListener("load", function () {
    const act = document.getElementsByClassName("collapsible-btn");

    for (i = 0; i < act.length; i++) {
        act[i].addEventListener("click", function () {
            const allPanels = document.querySelectorAll(".history-panel");
            allPanels.forEach((panel) => {
                if (panel.style.maxHeight) {
                  panel.style.maxHeight = null;
              }
            });
            const allButtons = document.querySelectorAll(".collapsible-btn");
            allButtons.forEach((button) => {button.classList.remove("active");
            });
            let panel = this.nextElementSibling;
            let content = panel.nextElementSibling;
            this.classList.toggle("active");

            if (panel.style.maxHeight) {
                panel.style.maxHeight = null;
            } else {
                panel.style.maxHeight = content.scrollHeight + "px";
            }
        });
    }
});
Tags:

2

Answers


  1. 0

    Please delegate and test there IS a nextElementSibling

    Alternatively and safer would be to use querySelector from the buttons closest parent container

    window.addEventListener("DOMContentloaded", () => {
  const allPanels = document.querySelectorAll(".history-panel");
  const allButtons = document.querySelectorAll(".collapsible-btn");

  document.getElementById("panelContainer").addEventListener("click", function(e) {
      const tgt = e.target.closest(".collapsible-btn");
      if (!tgt) return;
      allPanels.forEach(panel => panel.style.maxHeight && panel.style.maxHeight = null);
      allButtons.forEach(button => button.classList.toggle("active", button === tgt));

      let panel = tgt.nextElementSibling;
      if (!panel) {
        console.log("button does not have a panel")
        return;
      }
      let content = panel.nextElementSibling;
      if (!content) {
        console.log("panel does not have content or is not the next element sibling")
        return;
      }
      panel.style.maxHeight = content.scrollHeight + "px";
    }
  });
});
    Login or Signup to reply.
  2. 0

    I think is triggered when you are trying to access the scrollHeight property of an element that is null.

    The culprit seems to be in these lines:
    let panel = this.nextElementSibling;
    let content = panel.nextElementSibling;

    To fix the error, you should try add null checks:

    <pre>
    <code> 
    let panel = this.nextElementSibling;
    if (panel) {
        let content = panel.nextElementSibling;
        if (content) {
            this.classList.toggle("active");
            if (panel.style.maxHeight) {
                panel.style.maxHeight = null;
            } else {
                panel.style.maxHeight = content.scrollHeight + "px";
            }
        }
    }
</code>
</pre>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search