构建 Javascript 计算器的问题答案

【问题标题】：Issues with building out a Javascript Calculator构建 Javascript 计算器的问题
【发布时间】：2021-02-15 06:18:49
【问题描述】：

我正在尝试创建一个带有除法、乘法、减法、加法、清除、等于和小数按钮的简单 javascript 计算器。

我似乎不知道如何为除法/乘法和小数添加单元格。

我们将不胜感激任何试图解决此问题的帮助。

function calculate(numEntered) {
  if (numEntered == 'C') {
    document.getElementById('answer').value = '';
  } else if (numEntered == '=') {
    document.getElementById('answer').value = eval(document.getElementById('answer').value);
  } else {
    document.getElementById('answeralue') += numEntered;
  }
}

table,
td {
  border: 1px solid #000000;
}

td {
  cursor: pointer;
}

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td colspan="3"><input type="text" id="answer" disabled=""></td>
        <td onclick="calculate('C');">C</td>
      </tr>
      <tr>
        <td onclick="calculate(1);">1</td>
        <td>2</td>
        <td>3</td>
        <td onclick="calculate('+')">+</td>
      </tr>
      <tr>
        <td onclick="calculate(4);">4</td>
        <td>5</td>
        <td>6</td>
        <td onclick="calculate('-')" ;>-</td>
      </tr>
      <tr>
        <td onclick="calculate(7);">7</td>
        <td>8</td>
        <td>9</td>
        <td onclick="calculate('=')" ;>=</td>
      </tr>


    </tbody>
  </table>
</body>

</html>

【问题讨论】：

标签： javascript calculator

【解决方案1】：

您只需要添加一行，其余运算符 * - 乘法，/ - 除法和小数点 - .

 <tr>
        <td onclick="calculate('*');">*</td>
        <td onclick="calculate('/');">/</td>
        <td onclick="calculate('.');">.</td>
</tr>

编辑：这当然不会检查您是否已将操作员放置在适当的位置。

你的js代码有错别字：

    document.getElementById('answeralue') += numEntered; // should be ...('answer').value +=...

另外，请注意，eval 可能会打开您的项目进行代码注入，而且速度非常慢。

【讨论】：

【解决方案2】：

如果委托，则更容易处理每个单元格的内容

我还修复了您的错误

document.getElementById('answeralue') += numEntered;

它的 ID 错误，需要一个 .value

const nums = "1234567890";
const oper = "*/+-.";
const actions = "C";
document.getElementById("calc").addEventListener("click",function(e) {
  const char = e.target.textContent;
  if (char == 'C') {
    document.getElementById('answer').value = '';
    return;
  } 
//  if (oper.includes(char)) {  // for later
  if (char === "=") {
    document.getElementById('answer').value = eval(document.getElementById('answer').value);
    return
  }  
  else document.getElementById('answer').value += char.trim(); // the trim handles empty cells
});

table,
td {
  border: 1px solid #000000;
}

td {
  cursor: pointer;
  min-width: 30px;
}

<table>
    <tbody id="calc">
      <tr>
        <td colspan="3"><input type="text" id="answer" disabled=""></td>
        <td>C</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>+</td>
        <td>-</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>*</td>
        <td>/</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>=</td>
        <td>.</td>
      </tr>
    </tbody>
  </table>

【讨论】：