我在做一个计数器项目，遇到过几次这个问题，但我找不到问题是什么，所以我复制并粘贴了免费代码阵营做的计数器项目中的js，但这不起作用。我错过了什么？此外，任何最佳实践提示和一般建议都将不胜感激。
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="index.css">
<title>Counter</title>
</head>
<body>
<div class="container">
<div class="counterContainer">
<h1>Counter</h1>
<br>
<div class="counter" id="counter">
54
</div>
</div>
<div class="buttonContainer">
<button type="button" class="decreaseButton button" id="decreaseButton">
Decrease
</button>
<button type="button" class="resetButton button" id="resetButton">
Reset
</button>
<button type="button" class="increaseButton button" id="increaseButton">
increase
</button>
</div>
</div>
<script src="index.js">
</script>
</body>
</html>
js
// set inital value to zero
let count = 0;
// select value and buttons
const value = document.querySelector("counter");
const btns = document.querySelectorAll("button");
btns.forEach(function (btn) {
btn.addEventListener("click", function (e) {
const styles = e.currentTarget.classList;
if (styles.contains("decreaseButton")) {
count--;
} else if (styles.contains("increaseButton")) {
count++;
} else {
count = 0;
}
value.textContent = count;
});
});
如注释所示，此处为错误const value = document.querySelector("counter");此选择器选择不存在的HTML元素counter。应按类别或id进行选择，如const value = document.querySelector(".counter");或const value = document.querySelector("#counter");。两者对于本例都有效，但对于唯一元素id都是首选。
关于一般建议，此代码自启动以来不同步-显示54，但计数器的实际值为0。避免这种情况。您可以根据实际值设置counter元素中的初始文本，反之亦然-根据页面init上的文本值设置计数器值。