构建 Javascript 计算器的问题
[英]Issues with building out a Javascript Calculator
问题描述
我正在尝试创建一个简单的 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>
2 个解决方案
解决方案1
1 已采纳 2021-02-15 06:39:23
您只需要使用运算符* - 乘法， / - 除法和小数点 - 的 rest 添加一行.
<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
0 2021-02-15 06:49:20
如果委托，则更容易处理每个单元格的内容
我还修复了您的错误
document.getElementById('answeralue') += numEntered;
其 ID 错误且需要 a.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> </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>
在 JS 中构建计算器的问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.