`你好，我正在尝试编写一个计数器代码，其中有两个按钮（增加和减少），我创建了函数，它可以工作，但按钮消失了。
<!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>Buttons practice</title>
<script src="/JavaScript/buttons_practice.js" defer></script>
</head>
<body>
<button id="todo-button" onclick="DoneChange()">Changing Text</button>
<div id="counter">0
<button id="up">Up</button>
<button id="down">Down</button>
</div>
<div id="counter">0</div>
</body>
</html>
const Counter = document.getElementById('counter');
const Up = document.getElementById('up');
const Down = document.getElementById('down');
let count = 0;
Up.addEventListener('click', function Increase(){
count = count + 1;
UpdateCounter();
});
Down.addEventListener('click', function Decrease() {
count = count -1;
UpdateCounter();
});
function UpdateCounter() {
Counter.innerText= count;
}
我正在阅读一些类似的问题，但我无法弄清楚。一些针对 InnerText 的答案是问题，但是我可以看到这段代码有效，我基本上是在使用事件侦听器，所以我可以让 Html 独占到 Html，它是模块化的，更适合阅读我认为的代码。
<div id="counter">0</div>
<button onclick="countUp()">Up</button>
<button onclick="countDown()">Down</button>
<script>
let count = 0;
function countUp() {
count = count + 1;
updateCount();
}
function countDown() {
count = count - 1;
updateCount();
}
function updateCount() {
let counter = document.getElementById('counter');
counter.innerText = count;
}
</script>
按钮在柜台里面。因此，当您重写计数器的内容（使用 innerText）时，您将替换按钮。
请勿将按钮放在柜台内。
这个块中有两个 id 为 counter 的元素：
<div id="counter">0
<button id="up">Up</button>
<button id="down">Down</button>
</div>
<div id="counter">0</div>
当你做
Counter.innerText= count;
您覆盖了包含按钮的第一个 counter div 中的所有内容，结果它们消失了。