Почему не работает addEventListener?

Question

[Sergo Zar]

Я делаю функцию удаления сообщений в своём чате но js почему-то не находит addEventListener

Лог ошибки:

jquery-3.1.0.min.js:2 jQuery.Deferred exception: Cannot read property 'addEventListener' of null TypeError: Cannot read property 'addEventListener' of null
    at HTMLDocument.<anonymous> (http://1-4at/res/scripts/chat2.js:240:15)
    at j (http://1-4at/res/lib/jquery-3.1.0.min.js:2:29568)
    at k (http://1-4at/res/lib/jquery-3.1.0.min.js:2:29882) undefined
r.Deferred.exceptionHook @ jquery-3.1.0.min.js:2
k @ jquery-3.1.0.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.1.0.min.js:2
i @ jquery-3.1.0.min.js:2
fireWith @ jquery-3.1.0.min.js:2
fire @ jquery-3.1.0.min.js:2
i @ jquery-3.1.0.min.js:2
fireWith @ jquery-3.1.0.min.js:2
ready @ jquery-3.1.0.min.js:2
R @ jquery-3.1.0.min.js:2
jquery-3.1.0.min.js:2 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at HTMLDocument.<anonymous> (chat2.js:240)
    at j (jquery-3.1.0.min.js:2)
    at k (jquery-3.1.0.min.js:2)
(anonymous) @ chat2.js:240
j @ jquery-3.1.0.min.js:2
k @ jquery-3.1.0.min.js:2
setTimeout (async)
r.readyException @ jquery-3.1.0.min.js:2
(anonymous) @ jquery-3.1.0.min.js:2
j @ jquery-3.1.0.min.js:2
k @ jquery-3.1.0.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.1.0.min.js:2
i @ jquery-3.1.0.min.js:2
fireWith @ jquery-3.1.0.min.js:2
fire @ jquery-3.1.0.min.js:2
i @ jquery-3.1.0.min.js:2
fireWith @ jquery-3.1.0.min.js:2
k @ jquery-3.1.0.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.1.0.min.js:2
i @ jquery-3.1.0.min.js:2
fireWith @ jquery-3.1.0.min.js:2
fire @ jquery-3.1.0.min.js:2
i @ jquery-3.1.0.min.js:2
fireWith @ jquery-3.1.0.min.js:2
ready @ jquery-3.1.0.min.js:2
R @ jquery-3.1.0.min.js:2

Скрипт:

var mesdelete = document.getElementById("1");
    mesdelete.addEventListener("click", delete_message);
    function delete_message(){
        var messID = mesdelete.id;
         $(document).ready(function(){
                $.ajax({
                    url:"delete.php",
                    type:"POST",
                    data: ({deleteID: messID}),
                    dataType:"html",
                    success:deleteend
                }); 
            });
    }

Может быть это из-за того что я каждую секунду загружаю сообщения в чат?

Answer 1

[Sergo Zar]

Уже всё решил - проблема была в том что я эту функцию в другой функции написал. Теперь когда я переместил её ниже всё норм

Answer 2

[Александр]

А что в mesdelete?

Comments

[Sergo Zar]

Айди сообщения

[Александр]

Sergo Zar, но скрипт пишет, что в переменной null.

[Ernest Faizullin]

там null

какой id сообщения?

[Sergo Zar]

Ernest Faizullin, где вы null видите?

[Ernest Faizullin]

Sergo Zar, из текста ошибки вижу. `Cannot read property 'addEventListener' of null`

[Sergo Zar]

Ernest Faizullin, понял. Но если объект на самом деле есть то почему js его не видит?

[Ernest Faizullin]

Sergo Zar, видит null. Вам нужно получить элемент

[Sergo Zar]

Ernest Faizullin, а как мне его получить если он не получается

[Ernest Faizullin]

Sergo Zar, правильно указать класс или как вы пытаетесь?

[Ernest Faizullin]

в первый раз вижу id "1", может вам стоит сделать id не числовой а строковый? Но это не точно

[Sergo Zar]

Ernest Faizullin, я в файле который выводит сообщения как id передаю id сообщения из бд. И по идеи когда нажать на кнопку удаления то должен отправится id удаляемого сообщения в delete.php и там в запросом удаляется сообщение

[Ernest Faizullin]

попробуй в консоли браузера получить элемент, и станет понятно

[Sergo Zar]

Ernest Faizullin, получил

Answer 3

[carbanak01]

mesdelete.on("click", delete_message);
Я конечно не фанат JQuery, но попробуй так

Comments

[Ernest Faizullin]

он не может правильно получить DOM элемент

[carbanak01]

Ernest Faizullin, уже понял, увидел что внутри mesdelete null.

Answer 4

[Ernest Faizullin]

вы пытаетесь выполнить функцию от null значения
хоть null и объект, но у него нет и никогда не было функции addEventListener впрочем никакую функцию не вызвать

Comments

[Sergo Zar]

А как тогда сделать удаление сообщений? Куда писать номер сообщения?

[Ernest Faizullin]

Sergo Zar, вы торопитесь, чтобы все объяснить нужно минут 30-40. Я пока не могу

[Sergo Zar]

Ernest Faizullin, я не тороплюсь

Answer 5

[Владимир]

У вас какойто срач а не кусок кода
Вот тут

var mesdelete = document.getElementById("1");
    mesdelete.addEventListener("click", delete_message);
    function delete_message(){
        var messID = mesdelete.id;
       ...
    }

У вас ванильный JS без jquery, при этом внутри события delete_message вы вполне себе имеете доступ к элементу mesdelete через this но почемуто вяжете получение messID на глобальную переменную, значение в которой к моменту выполнения скрипта вполне себе может поменяться
Внутри события вы херачете

$(document).ready(function(){
                ...
            });

$(document).ready это тоже событие, при чем контролируется через jquery и выполняется в момент загрузки документа https://api.jquery.com/ready/ откройте доку почитайте как выдумаете, на момент клика по элементу с ID 1 страница загружена или нет? Обычно в ванильном js весь код, который работает с визуалкой помещают в window.onload или $(document).ready если jquery, но смысл писать ивентхендлер в ивент хендлере мне не ясен.
При этом в вашем отрывке не видно ни что стоит до этого чуда, ни самого html кода, поэтому совершенно не ясно что вы пытаетесь выбрать вот тут var mesdelete = document.getElementById("1"); и есть ли у вас этот элемент