I've been working on developing a calculator using HTML and JavaScript, but I'm facing an issue when trying to add two numbers together. Strangely enough, when attempting to calculate 1 + 0, I get the result of 512, and for 1 + 1, it returns 1024. I even attempted dividing the final result by 512 with no success for larger numbers. I've searched for a solution online, but I can't seem to find the exact problem.
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>Created 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>