无法读取 null 的属性答案

【问题标题】：Cannot read properties of null无法读取 null 的属性
【发布时间】：2021-12-04 21:52:27
【问题描述】：

我正在尝试在此页面上添加代码：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements

但它给了我一个关于 js 的错误：

未捕获的类型错误：无法读取 null 的属性（读取“getElementsByClassName”）在 main.js?ver=5.8.2:35

我正在尝试添加它：https://nuovosito.lealternative.net/test-browser-4/

它似乎工作正常，只是它找不到当前按钮的活动类。

编辑：

这里是给出错误的代码部分：

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("bottone");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

【问题讨论】：

请将相关代码发布到sn-p中。如果您提供的链接失效，那么这个问题将无法回答，对其他人也没有价值。然而，根据错误消息，它说任何调用getElementsByClassName 的都是null。无论是document. getElementsByClassName 还是someElement.getElementsByClassName，这意味着document 或someElement 是null 并且只有元素可以使用.getElementsByClassName

标签： javascript wordpress error-handling

【解决方案1】：

您的问题是脚本在#myBtnContainer 加载到页面之前执行。这可以通过将 main.js 的 <script> 标签放在所有其他 HTML 内容下方的 <body> 中来解决，或者像这样添加 defer 标签：

<script src='https://nuovosito.lealternative.net/wp-content/themes/twentytwentyone/assets/js/main.js?ver=5.8.2' id='js-file-js' defer></script>

解决此问题的另一种方法是将所有脚本包装在 DOMContentLoaded 侦听器中，这将使里面的内容仅在加载所有 HTML 元素后执行。

document.addEventListener('DOMContentLoaded', () => {
  // put your whole script here
});

【讨论】：

谢谢！它工作:)