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

Question 1

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

Question 2

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

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

Question 3

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

Question 4

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

Question 5

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

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

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

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

Question 6

Это просто bcz, ваш JS загружается до HTML-части, поэтому он не может найти этот элемент. Просто поместите весь свой JS-код в функцию, которая будет вызываться при загрузке окна.

Вы также можете поместить свой код Javascript под html.

Question 7

сценарий загружается до тела, сохранить сценарий после содержимого

Question 8

Поместите скрипт в конец тега body.

<html>
    <body>
        .........
        <script src="main.js"></script>
    </body>
</html>

Question 9

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

Question 10

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

Async / Await позволяет нам писать асинхронный код в синхронном режиме. это просто синтаксический сахар, использующий генераторы и операторы yield для «приостановки» выполнения, что дает нам возможность назначить его переменной!

Вот справочная ссылка - https://medium.com/siliconwat/how-javascript-async-await-works-3cab4b7d21da

Question 11

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

Question 12

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

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

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

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

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

Question 13

У меня есть коллекция цитат с именами. Я использую кнопку обновления, чтобы обновить последнюю цитату, связанную с определенным именем, но при нажатии кнопки обновления она не обновляется. Я включаю код ниже для файла 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);
  })

})

Question 14

Спасибо всем, загружайте скрипты на определенных страницах, которые вы используете, а не на всех страницах, иногда используя swiper.js или другую библиотеку, это может вызвать это сообщение об ошибке, единственный способ решить эту проблему - загрузить библиотеку JS на определенных страницах этот идентификатор существует и предотвращает загрузку одной и той же библиотеки на всех страницах.

Надеюсь, это поможет вам.

Question 15

У меня была такая же проблема, но присутствовал мой идентификатор. Поэтому я попытался добавить "window.onload = init;" Затем я обернул свой исходный код JS функцией инициализации (называйте ее как хотите). Это сработало, поэтому, по крайней мере, в моем случае я добавлял прослушиватель событий до загрузки моего документа. Это может быть то, что вы тоже испытываете.

Question 16

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

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

Question 17

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

window.addEventListener("load", startup);

function startup() {

  document.getElementById("el").addEventListener("click", myFunc);
  document.getElementById("el2").addEventListener("input", myFunc);

}

myFunc(){}