无法读取 null 的属性

Question

我正在尝试在此页面上添加代码：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/

它似乎工作正常，除了它找不到当前按钮的活动 class。

编辑：

此处出现错误的代码部分：

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

Answer 1

您的问题是脚本在 #myBtnContainer 加载到页面之前正在执行。这可以通过将 main.js 的 <script> 标签放在 <body> 中所有其他 HTML 内容下方，或像这样添加 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
});

无法读取 null 的属性

Cannot read properties of null

javascript

error-handling

wordpress