Hello, I am currently working on developing a calculator. However, I have encountered an issue where clicking on operator buttons such as +, -, /, *, and the dot button does not add them to my input field. Additionally, when these buttons are clicked, the entire value in the input tag gets erased. Can anyone provide guidance on how to resolve this issue? Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="calci.css">
</head>
<body>
<p id="para"></p>
<div class='main'>
<div class="showText">
<input class="input" type="number" id="input" disabled><br>
</div>
<div>
<div class="buttons">
<button type="button" id="block1">1</button>
<button type="button" id="block2">2</button>
<button type="button" id="block3">3</button>
<button type="button" id="block4">4</button>
<button type="button" id="block5">5</button>
<button type="button" id="block6">6</button>
<button type="button" id="block7">7</button>
<button type="button" id="block8">8</button>
<button type="button" id="block9">9</button>
<button type="button" id="block0">0</button>
<button type="button" id="dot" value=".">.</button>
</div>
<div class="operators" >
<button class="add" id="plus" value="+">+</button>
<button class="substract" id="minus" value="-">-</button>
<button class="division" id="divide" value="/">/</button>
<button class="multiply" id="multiply" value="*">*</button>
<button id="ans">Answer</button>
<button type="reset" id="clr">Reset</button>
</div>
</div>
</div>
<script src="calci.js"></script>
</body>
</html>
JavaScript starts here:
let input = document.querySelector('.input');
let button = document.querySelectorAll('button');
for(let btn of button){
btn.addEventListener('click',()=>{
if(input.value == ""){
input.value = (btn.innerText);
}
else if(input.value != "" ){
input.value += btn.innerText;
}
})
}
CSS starts here:
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
text-align: center;
margin-top: 2rem;
}
input{
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}