Блог

Главная - Вопросы по программированию - Javascript .onclick не вызывает функцию

Javascript .onclick не вызывает функцию

#javascript #onclick #javascript-objects #onclicklistener

#javascript #onclick #javascript-объекты #onclicklistener

Вопрос:

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

 document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#email-btn').onclick = email_select;
});
  
 function email_select(id){
  fetch(`/emails/${id}`)
  .then(response => response.json())
  .then(email => {
    console.log(email);
  });
}

Когда я запускаю, например, этот код в консоли:

 email_select(3);

Он показывает мне объект электронной почты, который сообщает мне, что функция работает правильно, но когда я нажимаю на кнопку в браузере, он не показывает мне объект электронной почты в консоли. Я попытался изменить его с .onclick на:

   document.querySelector('#email-btn').addEventListener('click', email_select);

Это тоже не сработало. Есть идеи, что я могу делать неправильно?

РЕДАКТИРОВАТЬ: я добавил #email-btn динамически, поэтому его нет в исходном HTML, и мне действительно было интересно, в чем реальная проблема. Ниже показано, как я динамически добавлял #email-btn:

 function load_mailbox(mailbox){

  // Show emails in mailbox
  fetch(`/emails/${mailbox}`)
  .then(response => response.json())
  .then(emails => {
    let output = '<div class="list-group">';
    emails.forEach(function(email){
      if(mailbox === "inbox"){
        if(email.body.length > 15){
          email.body = email.body.substring(0,15)   "...";
        } else {
          email.body = email.body
        }
        output  = `
        <button type="button" id="email-btn" class="list-group-item list-group-item-action">
          <strong>${email.sender}</strong><br>
          ${email.subject}<br>
          ${email.body}
        </button>
      `;
      } else if(mailbox === "sent"){
        if(email.body.length > 30){
          email.body = email.body.substring(0,30)   "...";
        } else {
          email.body = email.body
        }
        output  = `
        <button type="button" id="email-btn" class="list-group-item list-group-item-action">
          <strong>${email.recipients}</strong><br>
          ${email.subject}<br>
          ${email.body}
        </button>
      `;
      }
    });
    output  = '</div>'
    var Emails = document.createElement('div')
    Emails.innerHTML = output;
    document.querySelector('#emails-view').appendChild(Emails);
});
}

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

1. Кнопка электронной почты находится в исходном HTML или добавляется динамически?

2. Вы email_select никогда не получаете идентификатор. По крайней мере, не то, что вы, вероятно, ожидаете, что это будет — это на самом деле получает событие. Очень вероятно, что сетевой вызов завершается с ошибкой или, если он завершается успешно (например, fetch не отклоняет его), то .json() сбой.

3. function email_select(id){ <— этот идентификатор не является идентификатором…. Это объект события

4. @Barmar да, я создал email-btn динамически. Я отредактировал свой пост, чтобы показать, как он создается. Я думаю, может быть, потому, что я не создавал ее с помощью функции .createElement, она не распознается должным образом?

5. Но он создает несколько кнопок с одним и тем же id="email-btn" . document.querySelector("#email-btn") вернет только первый.

Ответ №1:

у вас нет параметра id в вашем onclick. сделайте onclick таким, чтобы вы могли добавить параметр.

 document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#email-btn').onclick = () => email_select(id);
});

Ответ №2:

  1. Если вы находите элемент по идентификатору, просто используйте document.getElementById('email-btn')

  2. Первый аргумент, который должен получить любой обработчик событий, — это «Событие».

  3. Не видя вашего фактического email-btn , трудно понять, как вы передаете id обработчику события, так как же ваш метод обработчика знает, какой id использовать?

  4. В this вашем обработчике это ссылка на элемент, для которого определен обработчик onclick, если только вы .bind() не передаете метод в другой контекст.