如何解决JavaScript .onclick不调用函数
当我单击页面上的按钮时,我希望它在控制台中显示电子邮件对象,但是它没有这样做。
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);
});
}
解决方法
您的onclick中没有id参数。 像这样进行onclick操作,以便您可以添加参数。
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('#email-btn').onclick = () => email_select(id);
});
,
-
如果要通过id查找元素,则只需使用
document.getElementById('email-btn')
-
任何事件处理程序将要接收的第一个参数是“事件”。
-
没有看到实际的
email-btn
,很难看到如何将id
提供给事件处理程序,那么处理程序方法如何知道要使用哪个id
? -
处理程序中的
this
是对定义了onclick处理程序的元素的引用,除非您将方法.bind()
切换到另一个上下文。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。