javascript - addEventListner 不适用于工厂函数对象
问题描述
我创建了一个工厂函数来返回一个按钮对象,在 consol.log 上我得到了正确的结果,但是在应用 addEventListner 时它不起作用
const tabButton = function(name)
{
const button = document.createElement("button")
button.innerText = name
button.classList.add("btn")
return {button}
}
const displayWebsite = function()
{
const btn = tabButton("name").button
console.log(btn) //<button class="btn">name</button>
btn.addEventListener("click",()=>{
console.log("debug") // not working
})
}
解决方案
此代码有效:
function tabButton(name) {
const button = document.createElement("button");
button.innerText = name;
button.classList.add("btn");
document.getElementById("theButtons").appendChild(button);
return button;
}
function displayWebsite() {
const btn = tabButton("name");
console.log(btn);
btn.addEventListener("click",() => {
console.log("debug")
})
}
displayWebsite()
<div id="theButtons"></div>
推荐阅读
- sql - Sql通配符不是结束字符串
- java - 查找奇偶校验异常值 CodeWars
- python - 用python抓取网页的所有颜色
- node.js - 使用“--experimental-modules”编译时如何修复“ReferenceError:require is not defined”错误?
- angular - 在 IE11 中更新 ngModel 后触发 ngbRadioGroup 点击事件
- excel - 将一列中所有单元格中的值添加到另一列中的相应单元格中,然后清除原始单元格
- dart - 导航器多次推送同一个屏幕
- javascript - 触发数组中的特定元素,然后遍历其他数组
- amazon-web-services - boto3 - 更好地使用http调用?
- acumatica - 购买收据下达后需要显示信息