英文:
Buttons disappearing after clicking on them Js/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>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>
英文:
`Hello there, I'm trying to write a counter code in which I have two buttons (Increase and Decrease), I created the functions, and it works but the buttons disappear.
<!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;
}
I was reading some similar questions, but I couldn't figure it out. Some answers aimed to the InnerText to be the Issue, however I can see this code works, I'm basically using the event listener so I can have Html exclusive to Html, it's modular and better at reading the code I think.
<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>
答案1
得分: 2
按钮位于计数器内部。因此，当您使用 innerText 重写计数器的内容时，会替换按钮。
不要将按钮放在计数器内部。
英文:
The buttons are inside the counter. Consequently, when you rewrite the contents of the counter (with innerText) you replace the buttons.
Don’t put the buttons inside the counter.
答案2
得分: 1
在这个块中，您有两个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 中的所有内容，因此它们会消失。
英文:
You have two elements with id counter in this block:
<div id="counter">0
<button id="up">Up</button>
<button id="down">Down</button>
</div>
<div id="counter">0</div>
When you do
Counter.innerText= count;
you override everything that you have within the first counter div that contains buttons, and as a result, they disappear.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论