"Не удается установить свойство 'onclick' равным null" в java script

ProgramBox

«Не удается установить свойство ‘onclick’ равным null» в java script

Post author:admin
Запись опубликована:10 мая, 2023
Post category:Вопросы по программированию

#javascript #onclick #onclicklistener

Вопрос:

У меня возникает проблема, когда use addEventListener или onclick код не выполняется, но типичным onclick атрибутом as в html-теге является work.

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

«Неперехваченная ошибка типа: не удается установить для свойства ‘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>

1. Не получается та же ошибка, что и у вас. Вы уверены, что этот фрагмент HTML находится в DOM по адресу onload ? Или это может быть добавлено позже?

2. да, я добавил » onload » позже после того, как увидел это в вопросе другого, но ошибка все еще. Я не заметил синтаксической ошибки, пока не увидел первый ответ

Ответ №1:

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

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

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

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

 var number = IDs.length;

1. Большое вам спасибо, проблема решена с помощью вашего решения

2. @BatoolAlFardan Этот код, возможно, устранил несколько проблем в вашем коде, но та, которая вызвала ошибку, упомянутую вами в вашем вопросе, не является одной из них.

3. @Ivar это произошло, потому что (‘hello’, ‘world’) вычисляется как ‘world’, который затем перебирает каждую букву мира и ищет элементы с идентификаторами ‘w’, ‘o’, ‘r’, ‘l’, ‘d’ (или ‘c’, ‘o’, ‘u’, ‘r’, ‘s’, ‘e’ в его случае). Из-за этого элемент не может быть найден, код выдает исключение, которое предотвращает вызов alert().

4. @StanislovasJanonis Ошибка » Не удается установить для свойства ‘onclick’ значение null «. onclick Устанавливается перед тем, как IDs будут установлены / цикл выполнен, так что нет, это не решило эту проблему. Эта ошибка возникает при попытке установить onclick для undefined значения, что может произойти только при document.getElementById('geneBtn') возврате undefined , который происходит, когда элемент не может быть найден. Это не имеет никакого отношения к ошибкам, которые вы исправили в этом ответе.

5. ах, подождите, вы правы, каким-то образом мне удалось пропустить часть вопроса. Странно 🙂

Ответ №2:

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

Добавлена проверка, действительно ли элемент существует
Преобразовал массивы для использования квадратных скобок
Изменено значение count в 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>

1. Большое вам спасибо, мистер Уэббер, ваш код более полезен и организован. Хотя я изменил свой код, и он работает хорошо, но ваш код кажется более упорядоченным и полезным. Я буду использовать это.