Блог

Главная - Вопросы по программированию - Вложенные прослушиватели событий в приложении Chrome

Вложенные прослушиватели событий в приложении Chrome

#javascript #google-chrome-app #addeventlistener

#javascript #google-chrome-app #addeventlistener

Вопрос:

Я создаю приложение Chrome, и у меня есть прослушиватель событий, который сначала прослушивает, готов ли весь DOM, а после этого запускает еще два прослушивателя для нажатия кнопок. Я вложил их все таким образом: 

 document.addEventListener('DOMContentLoaded', function() {

    var cf = document.getElementById('conv');
    var gf = document.getElementById('gotof');

    cf.addEventListener('click', convert, false);
    gf.addEventListener('click', gotof, false);

},false);

Но в консоли я все еще получаю сообщение 

 Uncaught TypeError: Cannot call method 'addEventListener' of null

Это происходит потому, что я пытаюсь вызвать идентификатор conv , когда у него все еще не было времени для загрузки в DOM, но … разве мой первый прослушиватель событий не позаботился об этом?? Я догадался, что все, что вы помещаете внутри функции события с помощью DOMContentLoaded, не будет запускаться, если все не будет загружено…

Два вызванных идентификатора относятся к объектам button, определенным в файле html. Имеет ли значение, определяю ли я их там в html или определяю их с помощью синтаксиса js (как в createElement

Отредактируйте, чтобы показать html, на который ссылается этот код: 

 <input type="button" class="css_button" value="Convert to DJ Ticker" id="conv" >
<input type="button" class="css_button" value="Go to website" id="gotof" >

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

Спасибо!

Комментарии:

1. Довольно загадочно. Если кнопки действительно статичны в загружаемом вами HTML, это должно их перехватить.

2. Два предложения: (1) Используйте консоль. войдите в систему, чтобы убедиться, что значения cf и gf равны нулю, и (2) замените внешний addEventListener на window.onload = function () { … }; . Поскольку ресурсы приложения Chrome являются локальными, загрузка выполняется достаточно быстро, и это гарантирует, что все загружено. Если приложение работает с onload, вы можете продолжить расследование, почему DOMContentLoaded не работает. Кроме того, было бы полезно, если бы вы опубликовали HTML, так как, возможно, там есть что-то, что мы могли бы вам помочь обнаружить.

3. Спасибо за ваши комментарии. Я попробовал window.onload, и он по-прежнему выдает мне ту же ошибку. Каким-то образом значения cf и gf равны нулю, но они должны указывать значение кнопок (я отредактировал свой вопрос с помощью html для них), и как только значение кнопок получено, оно должно связать указанные функции.

4. Все же было бы полезно опубликовать ВСЕ файлы HTML и js. Я предполагаю, что вы можете уменьшить js-файл до очень маленького, в котором также есть проблема. Таким образом, если бы кто-то был так склонен, это позволило бы попытаться воспроизвести проблему.

5. можете ли вы включить скрипт в конец DOM (после перечисления кнопок)