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

Question

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

Я должен использовать ванильный JavaScript для проекта. У меня есть несколько функций, одна из которых-кнопка, которая открывает меню. Он работает на страницах, где существует целевой идентификатор, но вызывает ошибку на страницах, где идентификатор не существует. На тех страницах, где функция не может найти идентификатор, я получаю ошибку "не могу прочитать свойство 'addEventListener' of null", и ни одна из моих других функций не работает.

Ниже приведен код для кнопки, которая открывает меню.

function swapper() {

toggleClass(document.getElementById('overlay'), 'open');

}



var el = document.getElementById('overlayBtn');

el.addEventListener('click', swapper, false);



var text = document.getElementById('overlayBtn');

text.onclick = function(){

this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";

return false;

};

Как справлюсь ли я с этим? Мне, вероятно, нужно все обернуть этот код в другую функцию или использовать оператор if/else, чтобы он только искал идентификатор на определенных страницах, но точно не уверен.

4607 11

javascript function getelementbyid addeventlistener

11 ответов:

Comments

Reply

cupoma58 4 года назад

<p>Сработал совет с переносом "<script src="sample.js" type="text/javascript"></script>" в самый низ странички (IE 11).</p>

<p>Благодарю.</p>

Rob M. · Accepted Answer · 2014-09-29 22:14:37

Я думаю, самый простой подход будет просто проверить, что el не является нулем перед добавлением прослушивателя событий:
var el = document.getElementById('overlayBtn');
if(el){
  el.addEventListener('click', swapper, false);
}

Dilip Agheda · Accepted Answer · 2017-12-30 18:49:18

кажется,document.getElementById('overlayBtn'); возвращается null потому что он выполняется до полной загрузки DOM.

если вы поместите эту строку кода под
window.onload=function(){
  -- put your code here
}
затем он будет работать без проблем.

пример:
window.onload=function(){
    var mb = document.getElementById("b");
    mb.addEventListener("click", handler);
    mb.addEventListener("click", handler2);
}


function handler() {
    $("p").html("<br>" + $("p").text() + "<br>You clicked me-1!<br>");
}

function handler2() {
    $("p").html("<br>" + $("p").text() + "<br>You clicked me-2!<br>");
}

sridhar · Accepted Answer · 2015-08-23 11:18:07

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

MattSidor · Accepted Answer · 2015-05-06 00:16:17

Я получал ту же ошибку, но выполнение нулевой проверки, похоже, не помогло.

решение, которое я нашел, заключалось в том, чтобы обернуть мою функцию внутри прослушивателя событий для всего документа, чтобы проверить, когда DOM закончил загрузку.
document.addEventListener('DOMContentLoaded', function () {
    el.addEventListener('click', swapper, false);
});
Я думаю, это потому, что я использую фреймворк (угловой), который динамически изменяет мои классы HTML и идентификаторы.

morocklo · Accepted Answer · 2015-12-24 05:41:32

спасибо @Rob M. за его помощь. Вот как выглядел последний блок кода:

function swapper() {
  toggleClass(document.getElementById('overlay'), 'open');
}

var el = document.getElementById('overlayBtn');
if (el){
  el.addEventListener('click', swapper, false);

  var text = document.getElementById('overlayBtn');
  text.onclick = function(){
    this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
    return false;
  };
}

Andy Smith · Accepted Answer · 2018-03-11 11:44:27

Я просто добавил "асинхронный" к моему тегу скрипта, который, похоже, исправил проблему. Я не уверен, почему, если кто-то может объяснить, но это сработало для меня. Мое предположение заключается в том, что страница не дожидаясь скрипта для загрузки, так что страница загружается в то же время, как JavaScript.

pjm · Accepted Answer · 2015-09-03 12:23:51

как говорили другие проблема заключается в том, что скрипт выполняется до загрузки страницы (и в частности целевого элемента).

но мне не нравится решение о дозаказе содержание.

предпочтительным решением является размещение обработчика событий на странице onload event и установка там прослушивателя. Это обеспечит загрузку страницы и целевого элемента до выполнения назначения. например,
    <script>
    function onLoadFunct(){
            // set Listener here, also using suggested test for null
    }
    ....
    </script>

    <body onload="onLoadFunct()" ....>
    .....

Ambreen Fatima · Accepted Answer · 2017-12-30 18:50:57

у меня есть коллекция цитат вместе с именами. Я использую кнопку обновить, чтобы обновить последнюю цитату, связанную с определенным именем, но при нажатии кнопки Обновить он не обновляется. Я включаю код ниже для сервера.js-файл и внешний js-файл (main.js).

главная.js (внешний js)
var update = document.getElementById('update');
if (update){
update.addEventListener('click', function () {

  fetch('quotes', {
  method: 'put',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({
    'name': 'Muskan',
    'quote': 'I find your lack of faith disturbing.'
  })
})var update = document.getElementById('update');
if (update){
update.addEventListener('click', function () {

  fetch('quotes', {
  method: 'put',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({
    'name': 'Muskan',
    'quote': 'I find your lack of faith disturbing.'
  })
})
.then(res =>{
    if(res.ok) return res.json()
})
.then(data =>{
    console.log(data);
    window.location.reload(true);
})
})
}
сервер.js file
app.put('/quotes', (req, res) => {
  db.collection('quotations').findOneAndUpdate({name: 'Vikas'},{
    $set:{
        name: req.body.name,
        quote: req.body.quote
    }
  },{
    sort: {_id: -1},
    upsert: true
  },(err, result) =>{
    if (err) return res.send(err);
    res.send(result);
  })

})

Xcode · Accepted Answer · 2017-12-27 17:36:43

это связано с тем, что элемент не был загружен в то время, когда выполнялся пакет js.

Я бы передвинул <script src="sample.js" type="text/javascript"></script> в самом низу . Таким образом, вы можете убедиться, что скрипт выполняется после того, как все элементы html были проанализированы и визуализированы .

Natalie Jimenez · Accepted Answer · 2017-12-30 18:46:04

добавить все прослушиватели событий при загрузке окна.Работает как шарм, независимо от того, где вы ставите теги script.
window.addEventListener("load", startup);
function startup() {
document.getElementById("el").addEventListener("click", myFunc);
document.getElementById("el2").addEventListener("input", myFunc);
}
myFunc(){
}