Javascript: Почему я получаю это Uncaught TypeError: Не удается прочитать свойство 'addEventListener' из null?

Я пытаюсь зарегистрировать обработчик события, который добавляет элемент в DOM, когда кнопка запускает событие клика, например.Javascript: Почему я получаю это Uncaught TypeError: Не удается прочитать свойство 'addEventListener' из null?

var b = document.getElementById('evt'); 

var eventDemo = function(event) { 

    console.log('I handled the event'); 
    console.log(event); 
    console.log(Object.prototype.toString.call(event)); 

var imgElement = document.createElement('img'); 
imgElement.src = 'http://lorempixel.com/150/150/'; 
document.body.appendChild(imgElement); 

}; 

b.addEventListener('onclick', eventDemo, false);

но я получаю:

Uncaught TypeError: Cannot read property 'addEventListener' of null

Почему это происходит

Browser: хром

источник

2015-07-07 the_velour_fog

Поскольку элемент с идентификатором 'evt' не существует – Tushar

Это означает, что в DOM нет элемента (во время выполнения кода) с идентификатором« evt ». Это означает, что переменная 'b' содержит' null'. – Pointy

Также используйте событие 'click', а не 'onclick'. –

Как вы сказали, что script загружается в head тэгом времени когда заявление

var b = document.getElementById('evt');

, нет элемента в DOM с идентификатором evt.

Используйте DOMContentLoaded событие, чтобы добавить прослушивателей событий на элемент. Это будет работать после полной загрузки DOM.

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event - load - should be used only to detect a fully-loaded page. It is an incredibly popular mistake for people to use load where DOMContentLoaded would be much more appropriate, so be cautious.

Код:

document.addEventListener("DOMContentLoaded", function(event) { 
    var b = document.getElementById('evt'); 
    b.addEventListener('click', eventDemo, false); 
});

источник

2015-07-07 16:29:17 Tushar

От mdn

element = document.getElementById(id);

элемент представляет собой ссылку на объект Element, или нуль если элемент с указанным идентификатором не в документе ,

В вашем случае b не найден и не возвращается null. Null не является объектом, поэтому он не может иметь addEventListener

источник

2015-07-07 16:29:38

В момент запуска этого скрипта элемент с id 'evt' не определен. Есть две возможности:

опечатка идентификатор или забыли добавить его, дважды проверьте его
Вы загружаете этот код, прежде чем страница визуализируется. Вы говорите, что вы загружаете этот скрипт с script.js, поэтому он, вероятно, происходит в <head>. Но когда скрипт загружен, <body> по-прежнему нет.

Либо добавить этот скрипт в нижней части страницы, или, лучше, использовать DOMContentLoaded событие:

document.addEventListener("DOMContentLoaded", function(event) { 
    //place all your code here 
});

И, как кто-то уже упоминалось, это событие называется click, не onclick. onclick является свойством DOM, скажем, эквивалентом в HTML до addEventListener.

Если вы когда-нибудь случится использовать Jquery, удобная обертка $(document).ready(function() { /* place hode here */ });

источник

2015-07-07 16:30:10

ошибка сама по себе четко объясняет! У вас нет элемента html с идентификатором 'evt'. Если вы уверены, что у вас есть элемент с id 'evt', используйте $(document).ready, как показано ниже, так что ваш js будет выполнен, когда будут загружены элементы html.

$(document).ready(function(){ 
var b = document.getElementById('evt'); 

var eventDemo = function(event) { 

    console.log('I handled the event'); 
    console.log(event); 
    console.log(Object.prototype.toString.call(event)); 

var imgElement = document.createElement('img'); 
imgElement.src = 'http://lorempixel.com/150/150/'; 
document.body.appendChild(imgElement); 

}; 

b.addEventListener('onclick', eventDemo, false); 
});

источник

2015-07-07 16:31:20

элемент существует в HTML, и если я проверю его на консоли. Как указывал Тушар и Барт Залевский, это было потому, что мой сценарий бежал до «тела» или чего-то еще загрузился –

См. Мое редактирование. Используя $ (document) .ready(), убедитесь, что ваш javascript выполняется только при загрузке вашей страницы html. –

Я получал такую же ошибку, и я потратил 2 дня на то же самое. Позже выяснилось, что одно и то же приложение отлично работает на firefox. Итак, я попробовал обновить мою версию chrome до 53.x.x И теперь такой проблемы не возникает. Возможно, это тоже поможет :)

источник

2016-09-29 11:07:11 sameepsi

Javascript: Почему я получаю это Uncaught TypeError: Не удается прочитать свойство 'addEventListener' из null?

ответ

Смежные вопросы