您好，我正在try 创建一个计算器，但当我点击任何操作符按钮，如+，-，/，*和点按钮，它没有添加到我的输入中.另外，当我点击这些按钮时，整个输入标记值都被擦除了.怎么修呢？请帮我修一下.
<!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>
Java脚本从这里开始:
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从这里开始:
*{
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;
}