Невозможно прочитать свойство addEventListener 'null

Мне нужно использовать ванильный JavaScript для проекта. У меня есть несколько функций, одна из которых - кнопка, открывающая меню. Он работает на страницах, где существует целевой идентификатор, но вызывает ошибку на страницах, где идентификатор не существует. На тех страницах, где функция не может найти идентификатор, я получаю сообщение "Can not read property" addEventListener "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, чтобы он искал только идентификатор на определенных страницах, но точно не уверен.

Ответы

Ответ 1

Я думаю, что самый простой подход состоял бы в том, чтобы просто проверить, что el не имеет значения null до добавления слушателя событий:

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

Ответ 2

Кажется, что 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>");
}

Ответ 3

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

Решение, которое я нашел, состояло в том, чтобы обернуть мою функцию внутри прослушивателя событий для всего документа, чтобы проверить, когда DOM закончил загрузку.

document.addEventListener('DOMContentLoaded', function () {
    el.addEventListener('click', swapper, false);
});

Я думаю, это связано с тем, что я использую фреймворк (Angular), который динамически меняет мои классы и идентификатор HTML.

Ответ 4

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

Ответ 5

Спасибо @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;
  };
}

Ответ 6

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

Но мне не нравится решение переупорядочения содержимого.

Предпочтительным решением является установка обработчика события на событие onload на странице и установка там Listener. Это обеспечит загрузку страницы и целевого элемента до выполнения назначения. например,

    <script>
    function onLoadFunct(){
            // set Listener here, also using suggested test for null
    }
    ....
    </script>

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

Ответ 7

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

main.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);
})
})
}

файл server.js

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

})

Ответ 8

Это решение сработало для меня.

var el = document.getElementById('toggles');
if (el) {
  addEventListener('click', function (e) {
    toggleMenu();
  });
};

Ответ 9

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

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

Ответ 10

Добавить все прослушиватели событий, когда загружается окно. Работает как шарм независимо от того, где вы помещаете теги script.

window.addEventListener("load", startup);
function startup() {
document.getElementById("el").addEventListener("click", myFunc);
document.getElementById("el2").addEventListener("input", myFunc);
}
myFunc(){
}