无法在 Javascript 计算器中将两个数字相加
[英]Unable to add two numbers together in Javascript Calculator
问题描述
我正在尝试使用 HTML 和 Javascript 创建一个计算器，但是当我尝试将两个数字相加时，它不起作用。 例如，当尝试添加 1 + 0 时，我得到的结果是 512。当添加 1 + 1 时，我得到 1024。我尝试将最终结果除以 512，但对于更大的数字没有运气。 我试图找到一个类似的问题，但我不知道到底要搜索什么。
var val = 0; var op = ""; function calculate(clicked_id) { var buttonID = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; for (var i = 0; i < buttonID.length; i++) { if (clicked_id == buttonID[i]) { document.getElementById("input").value += clicked_id; break; } else if (clicked_id == "add") { val = parseInt(document.getElementById("input").value); document.getElementById("input").value = ""; op = "plus"; break; } else if (clicked_id == "equal") { var temp = parseInt(document.getElementById("input").value); document.getElementById("input").value = ""; if (op == "plus") { val += +temp; document.getElementById("input").value = String(val); } } } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="script.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <title>Bootstrap</title> </head> <body> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1>Calculator</h1> <p>Designed by Nabil.</p> </div> </div> <div class="form-group"> <input type="text" id="input" placeholder=""> </div> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-dark" id="0" onclick="calculate(this.id)">0</button> <button type="button" class="btn btn-light" id="1" onclick="calculate(this.id)">1</button> <button type="button" class="btn btn-light" id="2" onclick="calculate(this.id)">2</button> <button type="button" class="btn btn-light" id="3" onclick="calculate(this.id)">3</button> <button type="button" class="btn btn-light" id="4" onclick="calculate(this.id)">4</button> <button type="button" class="btn btn-light" id="5" onclick="calculate(this.id)">5</button> <button type="button" class="btn btn-light" id="6" onclick="calculate(this.id)">6</button> <button type="button" class="btn btn-light" id="7" onclick="calculate(this.id)">7</button> <button type="button" class="btn btn-light" id="8" onclick="calculate(this.id)">8</button> <button type="button" class="btn btn-light" id="9" onclick="calculate(this.id)">9</button> <button type="button" class="btn btn-secondary" id="add" onclick="calculate(this.id)">+</button> <button type="button" class="btn btn-secondary" id="equal" onclick="calculate(this.id)">=</button> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2021-07-01 01:02:42
您需要在最后一个 else if 块中添加一个中断
var val = 0; var op = ""; function calculate(clicked_id) { var buttonID = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; for (var i = 0; i < buttonID.length; i++) { if (clicked_id == buttonID[i]) { document.getElementById("input").value += clicked_id; break; } else if (clicked_id == "add") { val = parseInt(document.getElementById("input").value); document.getElementById("input").value = ""; op = "plus"; break; } else if (clicked_id == "equal") { var temp = parseInt(document.getElementById("input").value); document.getElementById("input").value = ""; if (op == "plus") { val += +temp; document.getElementById("input").value = String(val); } break; } } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="script.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <title>Bootstrap</title> </head> <body> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1>Calculator</h1> <p>Designed by Nabil.</p> </div> </div> <div class="form-group"> <input type="text" id="input" placeholder=""> </div> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-dark" id="0" onclick="calculate(this.id)">0</button> <button type="button" class="btn btn-light" id="1" onclick="calculate(this.id)">1</button> <button type="button" class="btn btn-light" id="2" onclick="calculate(this.id)">2</button> <button type="button" class="btn btn-light" id="3" onclick="calculate(this.id)">3</button> <button type="button" class="btn btn-light" id="4" onclick="calculate(this.id)">4</button> <button type="button" class="btn btn-light" id="5" onclick="calculate(this.id)">5</button> <button type="button" class="btn btn-light" id="6" onclick="calculate(this.id)">6</button> <button type="button" class="btn btn-light" id="7" onclick="calculate(this.id)">7</button> <button type="button" class="btn btn-light" id="8" onclick="calculate(this.id)">8</button> <button type="button" class="btn btn-light" id="9" onclick="calculate(this.id)">9</button> <button type="button" class="btn btn-secondary" id="add" onclick="calculate(this.id)">+</button> <button type="button" class="btn btn-secondary" id="equal" onclick="calculate(this.id)">=</button> </div> </body> </html>
制作简单的JavaScript计算器，将两个属性加在一起会遇到麻烦
[英]Making a simply javascript calculator, having trouble adding two properties together
为什么我的 JavaScript 计算器不允许我加/减数字？
[英]Why does my JavaScript calculator not allow me to add/subtract numbers?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.