我正在练习我的 vanilla JS 并尝试创建动态元素。我遇到了一些有趣的行为。我只是创建一个按钮,单击它,然后将其渲染到 DOM 上。但是后来我想创建另一个将鼠标悬停在 h1 元素上并更改颜色的事件,但是我收到了“未捕获的类型错误:无法读取 null 的属性‘addEventListener’”。如果 DOM 上有 h1,为什么这显示为 null,为什么现在显示无法读取 null 的属性“addEventListener”?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creating Dynamic Elements</title>
</head>
<body>
</body>
</html>
JavaScript
// const h1 = document.querySelectorAll('h1');
const button = document.createElement('button');
button.textContent = "Click me";
document.querySelector('body').appendChild(button);
button.addEventListener('click', function() {
const h1 = document.createElement('h1');
h1.textContent = 'Hello World!';
document.querySelector('body').appendChild(h1);
});
document.querySelector('h1').addEventListener('mouseover', function() {
alert("It works!");
});
答案 0 :(得分:2)
在函数内添加您的 h1 事件侦听器,因为加载时没有 h1。
const button = document.createElement('button');
button.textContent = "Click me";
document.querySelector('body').appendChild(button);
button.addEventListener('click', function() {
const h1 = document.createElement('h1');
h1.textContent = 'Hello World!';
document.querySelector('body').appendChild(h1);
h1.addEventListener('mouseover', function() {
alert("It works!");
});
});
答案 1 :(得分:1)
这行不通,因为在执行 addEventListner 行时,您的 DOM 没有任何“h1”元素 您可以改为将其移动到按钮事件侦听器功能中
Also document.querySelect()
只选择带有选择器的第一个元素
如果您希望它与您添加的每个 h1 元素一起使用,您应该使用引用您在代码中动态创建的元素的变量
const button = document.createElement('button');
button.textContent = "Click me";
document.querySelector('body').appendChild(button);
button.addEventListener('click', function() {
const h1 = document.createElement('h1');
h1.textContent = 'Hello World!';
document.querySelector('body').appendChild(h1);
/* This will only select the first h1 element in the whole document
document.querySelector('h1').addEventListener('mouseover', function() {
alert("It works!");
});
*/
//This will add the event listener to every h1 element you create
h1.addEventListner('mouseover', function() {
alert("It works!");
});
});