addEventListener () возврати null

Добрый вечер, я пробую выполнять функцию, загрузив страницу, если я это делаю с addEventListener, он возвращает меня null, однако та же функция с window.onload функционирует верно.

Пример с window.onload:

function saludar() {
    document.querySelector('#elem').innerHTML = 'Hola piti';
}

window.onload = function () {
    document.querySelector('#btn').onclick = saludar;
};

Код HTML:

<button id="btn">mostrar</button>
<div id="elem" ></div>

Если вы это тестируете, функционируй верно, однако сейчас я иду делать их самими с listener:

Пример с addEventListener:

var target = document.querySelector('#btn');
    target.addEventListener('click', saludar, false);

function saludar() {
document.querySelector('#elem').innerHTML = 'Hola piti';
}

Вы увидите, что в вышеупомянутом коде он возвращает null.

Каков правильный способ это делать? чтобы мочь быть для ES6 и он был бы благодарен за то, чтобы это был единственный Javascript, ничто из Frameworks, так как в jQuery или я другие знаю, как делание этого.

Привет.

1
задан 16.06.2016, 17:18
3 ответа

Вероятно, что ты выполняешь твой код JS, когда DOM еще не готов. Всегда рекомендуемо помещать это перед завершением <body>, как впитанный или как соединение (<script src="...">).

<button id="btn">Mostrar</button>
<div id="elm"></div>

<script>
   const btn = document.querySelector('#btn');
   btn.addEventListener('click', saludar);
  
   function saludar() {
      document.querySelector('#elm').innerText = 'Hola'; 
   }
</script>

Или с ES6:

btn.addEventListener('click', (e) => {
    document.querySelector('#elm').innerText = 'Hola';
});

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

document.addEventListener('DOMContentLoaded', () => {
    // aquí todo tu código
});
0
ответ дан 24.11.2019, 14:08
  • 1
    Совершенный, большое спасибо! как только c и # 243; я говорю эту во внешнем файле. – UnderZero_- 16.06.2016, 17:39

EDIT: То, что я прокомментировал, фальшивое; то, что ты реализуешь, правильно, но проблема, должно быть,, - в котором элементы загружаются ПОСЛЕ твоего рукописного шрифта; чтобы это подтверждать только надо, чтобы ты открыл консоль (F12), и ты увидишь ошибку undefined или немного из-за стиля. Чтобы это решать у тебя есть несколько способов:

1. Двигать код javascript в нижней части твоей страницы для того, чтобы нагрузите после инициализации объектов до того, как body tag закройте, как они показывают здесь.

2. Использовать window.onload независимо, откуда были scripts, и размещать там твое заявление:

window.onload = function () {
    target.addEventListener('click', saludar, false);
}


Первоначальный ответ: Другой способ использовать addEventListener он был бы:

var target = document.querySelector('#btn');
target.addEventListener('click',  function() { document.querySelector('#elem').innerHTML = 'Hola piti'; }, false);

Обрати внимание, что функция определяется там сам!

Из-за которого ты можешь видеть в этом самом законченном ответе, у тебя есть большие возможности.

2
ответ дан 24.11.2019, 14:08
  • 1
    В случае c и # 243; говорит OP, он правилен, потому что saludar - funci и # 243; n и он ссылается на нее. – gugadev 16.06.2016, 17:27
  • 2
    @MitsuGarc и # 237; в Tienes raz и # 243; n; проблема быть и # 225; тогда из-за груза ее p и # 225; gina. – Miquel Coll 16.06.2016, 17:29
  • 3
    Схвати и # 237; он, это проблема. – gugadev 16.06.2016, 17:33
  • 4
    Если, я считаю решенной тему, мы видимся из-за сообщества. – UnderZero_- 16.06.2016, 17:42
  • 5
    @UnderZero_ - не забывай выбрать правильный ответ. Привет. – gugadev 16.06.2016, 17:46

Проблема состоит в том, что с первым выбором ты выполняешь код однажды, была загружена страница (в событии похвалите window), взамен со вторым выбором код (addEventListener) работает немедленной формы.

Если код находится до того, как была определена кнопка, оно ты не будет функционировать.

Два выбора:

Включи твой код в конце страницы, как только была создана кнопка.

Выполни код в событии похвалите window, как в первом выборе:

window.addEventListener('load', function(){
  var target = document.querySelector('#btn');
  target.addEventListener('click', saludar, false);
});

function saludar() {
  document.querySelector('#elem').innerHTML = 'Hola piti';
}
<button id="btn">mostrar</button>
<div id="elem"></div>
1
ответ дан 24.11.2019, 14:08