我不断收到错误“未捕获的类型错误：无法读取 null 的属性（读取“addEventListener”）”，并且我无法弄清楚我的代码出了什么问题。
我期望它立即运行我的代码，但它给了我错误，所以我查找了解决方案并尝试将 JavaScript 代码放入我的 HTML 代码中，但它仍然不起作用，所以我来到这里。
分别是HTML、CSS、JS代码：
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project</title>
</head>
<body>
<div margin><span class="span1"> </span></div>
<h1>Button Game</h1>
<h2><span class="span2"> </span></h2>
<p><button class="button1">Press</button></p>
<p><button class="button2"><span class="span3">Press?</span></button></p>
</html>
body {
padding: 4rem;
font-family: "Trebuchet MS";
}
button {
background-color: red;
color: whitesmoke;
}
const btnElement = document.querySelector("button1");
const btnElement1 = document.querySelector("button2");
let spanElement = document.querySelector("span1");
const spanElement1 = document.querySelector("span2");
btnElement.addEventListener("click", () => {
const yourName = prompt("Please enter your name.");
spanElement2.textContent = yourName;
});
代码中的几个错误：
HTML 缺少结束
body. (dot)中的类之前添加
querySelector
这是更正后的代码：
const btnElement = document.querySelector(".button1");
const btnElement1 = document.querySelector(".button2");
let spanElement = document.querySelector(".span1");
const spanElement1 = document.querySelector(".span2");
btnElement.addEventListener("click", () => {
const yourName = prompt("Please enter your name.");
spanElement.textContent = yourName; // Change spanElement2 to spanElement
});body {
padding: 4rem;
font-family: "Trebuchet MS";
}
button {
background-color: red;
color: whitesmoke;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project</title>
</head>
<body>
<div><span class="span1"> </span></div>
<h1>Button Game</h1>
<h2><span class="span2"> </span></h2>
<p><button class="button1">Press</button></p>
<p><button class="button2"><span class="span3">Press?</span></button></p>
</body>
</html>