«Невозможно установить свойство« onclick »of null» в сценарии Java

Question

У меня проблема при использовании addEventListener или onclick код не выполняется, но типичный onclick в качестве атрибута в HTML-теге работает.

Состояние проблемы, которое я обнаружил при тестировании моего кода в онлайн-отладчике:

"Uncaught TypeError: Невозможно установить свойство 'onclick' для null.

function classChange(sectionName, liName) {

  var IDs = ('general-edit-container', 'contloc', 'payment', 'attach', 'course');
  var number = count(IDs);
  for (var i = 0; i < number; i++) {
    if (IDs[i] == sectionName) {
      document.getElementById(sectionName).style.display = "block";
    } else {
      document.getElementById(sectionName).style.display = "none";
    }
  }
  var arr = ('one', 'two', 'three', 'four', 'five');
  var num = count(arr);
  for (var b = 0; b < num; b++) {
    if (arr[b] == liName) {
      document.getElementById(liName).className = " activebtn";
    } else {
      document.getElementById(liName).className = "";
    }
  }
}
window.onload = function() {
  document.getElementById('geneBtn').onclick = function() {
    classChange('general-edit-container', 'one');
    alert('done');
  };
}

<li id="one">
  <a href="javascript:void(0);" id="geneBtn">
    <img width="40px" src="img/person-info.png">
    <h1 id="demo">General Information</h1>
  </a>
</li>

Answer 1

Это должно помочь вам отладить вашу проблему.

• Добавлена ​​проверка, существует ли элемент на самом деле
• Преобразованные массивы в квадратные скобки
• Изменено количество в Array.length

function classChange(sectionName, liName) {
  var IDs = ['general-edit-container', 'contloc', 'payment', 'attach', 'course'];
  var number = IDs.length;
  for (var i = 0; i < number; i++) {
    var section = document.getElementById(IDs[i]);
    if (section === null) {
      alert('There is no element with the id of "' + IDs[i] + '" in the DOM.');
      continue;
    }
    if (IDs[i] == sectionName) {
      section.style.display = "block";
    } else {
      section.style.display = "none";
    }
  }
  var arr = ['one', 'two', 'three', 'four', 'five'];
  var num = arr.length;
  for (var b = 0; b < num; b++) {
     var listItem = document.getElementById(arr[b])
     if (listItem === null) {
       alert('There is no element with the id of "' + arr[b] + '" in the DOM.');
       continue;
     }    
    if (arr[b] == liName) {
      listItem.className = " activebtn";
    } else {
      listItem.className = "";
    }
  }
}
window.onload = function() {
  document.getElementById('geneBtn').onclick = function() {
    classChange('general-edit-container', 'one');
    alert('done');
  };
}

<li id="one">
  <a href="javascript:void(0);" id="geneBtn">
    <img width="40px" src="img/person-info.png">
    <h1 id="demo">General Information</h1>
  </a>
</li>

Answer 2

var IDs = ('general-edit-container', 'contloc', 'payment', 'attach', 'course');

массивы создаются с помощью квадратных скобок, например:

var IDs = ['general-edit-container', 'contloc', 'payment', 'attach', 'course'];

Неясно, как реализована ваша функция count, но вместо ее использования вы могли бы просто сделать

var number = IDs.length;