Не удается прочитать свойства null

#javascript #wordpress #error-handling

#javascript #wordpress #обработка ошибок

Вопрос:

Я пытаюсь добавить код на эту страницу: 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";
  });
}

1. Пожалуйста, разместите соответствующий код во фрагменте. Если эта предоставленная вами ссылка будет отключена, то на этот вопрос невозможно ответить, и он не будет представлять ценности для других. Однако, основываясь на сообщении об ошибке, он говорит, что все, что вызывает getElementsByClassName , есть null . Независимо от того, является ли это document. getElementsByClassName or someElement.getElementsByClassName , это тогда означает document или someElement null , и только элементы могут использовать .getElementsByClassName

Ответ №1:

Ваша проблема в том, что скрипт выполняется до #myBtnContainer загрузки на страницу. Это можно исправить, поместив ваш <script> тег for main.js в ваш <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
});