构建 Javascript 计算器的问题

Question

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

我似乎不知道如何为 divide/multiply 和小数添加单元格。

如果您能帮助解决这个问题，我们将不胜感激。

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>

Answer 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 可能会打开您的项目进行代码注入，而且速度非常慢。

Answer 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>

构建 Javascript 计算器的问题

Issues with building out a Javascript Calculator

javascript

calculator