简体   繁体   English

单击按钮后如何删除 0?

[英]How do I remove the 0 once a button is clicked?

For example, when I click either 1 or 2 the 0 in the display will be overwritten with the button clicked.例如,当我单击12时, display0将被单击的按钮覆盖。

 let display = document.querySelector('.display'); let numberButtons = document.querySelectorAll('.number').forEach(function(numberButtons) { numberButtons.addEventListener('click', showNumber) function showNumber() { display.innerHTML += numberButtons.innerHTML } });
 <body> <div class='container'> <div class="display">0</div> <button class='number' id='one'>1</button> <button class='number' id="two">2</button> </div> </body>

you can simply add an if statement states that if there is 0 in the display remove it before adding anything like if (display.textContent == 0){display.innerHTML = "";} just the following您可以简单地添加一个if语句,指出如果display中存在0 ,则在添加诸如if (display.textContent == 0){display.innerHTML = "";}之类的内容之前将其删除,只需以下内容

Example例子

 let display = document.querySelector('.display'); let numberButtons = document.querySelectorAll('.number').forEach(function(numberButtons) { numberButtons.addEventListener('click', showNumber) function showNumber() { if (display.textContent == 0){ display.innerHTML = ""; } display.innerHTML += numberButtons.innerHTML; } });
 <body> <div class='container'> <div class="display">0</div> <button class='number' id='one'>1</button> <button class='number' id="two">2</button> </div> </body>

Or simply if you want to overwrite everything means that before adding anything in the DOM just remove everthing you can simply try the following或者简单地说,如果您想覆盖所有内容意味着在 DOM 中添加任何内容之前只需删除所有内容,您可以简单地尝试以下操作

Example例子

 let display = document.querySelector('.display'); let numberButtons = document.querySelectorAll('.number').forEach(function(numberButtons) { numberButtons.addEventListener('click', showNumber) function showNumber() { display.innerHTML = ""; display.innerHTML += numberButtons.innerHTML; } });
 <body> <div class='container'> <div class="display">0</div> <button class='number' id='one'>1</button> <button class='number' id="two">2</button> </div> </body>

It seems your button texts are always numericals, and that the displayed result should be the number formed by those digits.似乎您的按钮文本始终是数字,并且显示的结果应该是由这些数字组成的数字。

You can convert the result to number (using unary + ) and assign that:您可以将结果转换为数字(使用一元+ )并分配:

display.textContent = +(display.textContent + numberButtons.textContent)

NB: it is better practice to reserve the use of innerHTML for when you need to support HTML encoded strings.注意:当您需要支持 HTML 编码字符串时,最好保留使用innerHTML Otherwise use textContent .否则使用textContent

 let display = document.querySelector('.display'); let numberButtons = document.querySelectorAll('.number').forEach(function(numberButtons) { numberButtons.addEventListener('click', showNumber) function showNumber() { display.innerHTML = +(display.innerHTML + numberButtons.innerHTML); } });
 <div class='container'> <div class="display">0</div> <button class='number' id='one'>1</button> <button class='number' id="two">2</button> </div>

I still need the +=, but at the same time, I don't want the 0 to appear after I click the buttons.我仍然需要 +=,但同时,我不希望在单击按钮后出现 0。

You can check if display.innerHTML is 0. So can decide if concatenate or substitute the string.您可以检查display.innerHTML是否为 0。因此可以决定是连接还是替换字符串。

 let display = document.querySelector('.display'); let numberButtons = document.querySelectorAll('.number').forEach(function(numberButtons) { numberButtons.addEventListener('click', showNumber) function showNumber() { if (display.innerHTML == '0') { display.innerHTML = numberButtons.innerHTML } else { display.innerHTML += numberButtons.innerHTML } } });
 <div class='container'> <div class="display">0</div> <button class='number' id='one'>1</button> <button class='number' id="two">2</button> </div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM