【发布时间】：2021-09-13 02:26:33
【问题描述】：
我正在尝试使用 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>【问题讨论】：
-
您需要在最后的
else if中添加一个break，此时由于循环，您需要多次添加。 -
循环遍历整个 buttonID 数组。您需要存储所有输入的数字，然后遍历这些数字并插入操作。
标签： javascript html css math bootstrap-4