时间戳

首页 > 解决方案 > 构建 Javascript 计算器的问题

javascript - 构建 Javascript 计算器的问题

问题描述

我正在尝试创建一个带有除法、乘法、减法、加法、清除、等于和小数按钮的简单 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>

标签： javascriptcalculator

解决方案

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

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

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

您的 js 代码中有错字：

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

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

推荐阅读