英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论