计算器不能正常工作-小数点有问题

Question

我正处于构建计算器的早期阶段。当我按"1“或"2”时，它工作得很好(用数字替换0)；但是，当我尝试按"0.01“时，它不能正确显示它。我假设前两个if语句可以解决这个问题。

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 = " "
    }

    if (!(numberButtons.innerHTML.includes('.') && display.innerHTML.includes('.'))){//this basically says that if it has a "." dont add "."
       display.innerHTML += numberButtons.innerHTML
    }
}    
});

<div class='calculator'>
  <div class="display">0</div>    
  <button class='number' id='one'>1</button>
  <button class='number' id="two">2</button>    
  <button class='number' id='zero'>0</button>
  <button class='number' id='decimal-point'>.</button>    
</div>

Answer 1

这一行：

if (display.textContent == 0) {

如果textContent是以下任一项，则为true：'0.', '0', '', '.0', '0.0', '-0', '+0'，依此类推。这是因为JavaScript首先将字符串值强制为一个数字。

相反，您可能希望检查与字符串值display.textContent === '0'的严格相等。您还可以使用诸如['0', ''].includes(display.textContent)之类的东西来检查列表，或者使用regular expression进行模式匹配：/^0?$/.test(display.textContent)。

有关相等如何在JavaScript中工作的更多详细信息，请参阅Equality comparisons and sameness 。

Answer 2

您正在尝试检查一堆导致您出现问题的东西。使用==也会带来问题，因为它可以匹配多个事物。

就个人而言，您的逻辑应该被打破，以处理与数字分开的小数点。使用switch语句可以帮助清理它。

​

let display = document.querySelector('.display');

function showNumber() {
  let entry = this.value;
  let currentValue = display.textContent;
  if (currentValue === '0') currentValue = '';
  switch (entry) {
    case ".":
      if (currentValue.includes(".")) { // if there, do not add another
        return;
      } else if (currentValue.length === 0) { // if new, add leading zero
        currentValue = "0.";
      } else { // just add it to the end
        currentValue += ".";
      }
      break;
    default:
      currentValue += entry;
  }
  display.textContent = currentValue;
}


document.querySelectorAll('.number').forEach(function(numberButtons) {
  numberButtons.addEventListener('click', showNumber)
});

<div class='calculator'>
  <div class="display">0</div>
  <button class='number' id='one' value="1">1</button>
  <button class='number' id="two" value="2">2</button>
  <button class='number' id='zero' value="0">0</button>
  <button class='number' id='decimal-point' value=".">.</button>
</div>

​

Answer 3

如果你想在这里做最小的调整，那么我只给你三个修改。

1. 将innerHTML和innerContent的混合用法仅替换为其中一种。
2. 检查字符串'0'而不是数字
3. 在第一个for中添加检查小数点的条件

​

let display = document.querySelector('.display');

let numberButtons = document.querySelectorAll('.number').forEach(function(numberButtons) {
  numberButtons.addEventListener('click', showNumber);

  function showNumber() {
    if (display.innerHTML === '0' && !numberButtons.innerHTML.includes('.')) {
      display.innerHTML = "";
    }

    if (!(numberButtons.innerHTML.includes('.') && display.innerHTML.includes('.'))) { //this basically says that if it has a "." dont add "."
      display.innerHTML += numberButtons.innerHTML;
    }
  }
});

<div class='calculator'>
  <div class="display">0</div>
  <button class='number' id='one'>1</button>
  <button class='number' id="two">2</button>
  <button class='number' id='zero'>0</button>
  <button class='number' id='decimal-point'>.</button>
</div>

​

我建议你对引号的用法做一些清理，你可能会发现有更好的方法来制作计算器，而不是在HTML中连接字符串。

祝你好运！