JavaScript计算器输入不允许多次清除和小数
JavaScript计算器输入不允许多次清除和小数,javascript,html,Javascript,Html,const numbers=document.querySelectorAll（'.number'）； let display=document.getElementById（'display'）； 让输出， 零,， 十进制的 //循环通过所有按钮输出值以显示div for（设i=0；i{ 输出=display.innerHTML+=e.target.value； 如果（输出长度>16）{ 警报（“达到最大输入”）； } }); }; //删除按钮功能 document.getElementBy
const numbers=document.querySelectorAll（'.number'）；
let display=document.getElementById（'display'）；
让输出，
零,，
十进制的
//循环通过所有按钮输出值以显示div
for（设i=0；i{
输出=display.innerHTML+=e.target.value；
如果（输出长度>16）{
警报（“达到最大输入”）；
}
});
};
//删除按钮功能
document.getElementById（'buttonDelete'）。addEventListener（'click'，（e）=>{
如果（e.target.value==='delete'）{
display.innerHTML=''；
}
});
document.querySelector（“#buttonZero”）.addEventListener（'click'，（e）=>{
零=e.目标值；
如果（display.innerHTML==''）{
output=display.innerHTML=零；
}else if（display.innerHTML==输出）{
输出=display.innerHTML+=零；
}
});
document.querySelector（“#buttonDecimal”）.addEventListener（'click'，（e）=>{
十进制=e.目标值；
如果（display.innerHTML==''）{
output=display.innerHTML=display.innerHTML.concat（'0'）；
}else if（display.innerHTML==输出）{
display.innerHTML=display.innerHTML.concat（'.'）；
}
});
document.querySelector（“#buttonEqual”）.addEventListener（'click'，（e）=>{
if（display.innerHTML==输出）{
display.innerHTML=eval（输出）；
}否则{
display.innerHTML=''；
}
});
let operators=document.queryselectoral（“.operator”）；
对于（var i=0；i{
运算符=e.目标值；
如果（display.innerHTML==''）{
display.innerHTML=display.innerHTML.concat（“”）；
}else if（输出）{
display.innerHTML=output.concat（运算符）；
}
});
} #计算器体{
背景色：天蓝色；
边界半径：5px；
垫底：10px；
}
.计算器按钮{
显示：内联块；
背景色：#5959；
填充：25px；
保证金：5px；
边界半径：5px；
颜色：#fff；
}
.计算器按钮：激活{
背景色：#fff；
颜色：#000；
}
#巴顿塞罗{
宽度：138px；
}
#钮扣删除{
宽度：132px；
背景色：#ff3333；
}
#钮扣相等{
背景色：#33cc33；
颜色：#000；
}
#钮扣周期{
背景色：#404040；
}
.号码{
背景色：#404040；
}
.接线员{
背景色：#A6；
}
#展示{
字体系列：“Orbitron”，无衬线；
边界半径：5px；
边框：纯灰2px；
背景色：#d9d9d9；
保证金：自动；
边缘顶部：30px；
边缘底部：15px；
宽度：80%；
溢出：隐藏；
显示：块；
字号：21px；
填充顶部：12px；
高度：55px；
右侧填充：4px；
文本对齐：右对齐；
}
/*#显示p{
浮动：对；
字体大小：35px；
利润上限：-25px；
}*/
@仅介质屏幕和（最大宽度：375px）{
.计算器按钮{
填充：20px；
}
#展示{
边缘顶部：20px；
}
}
删除
%
+
7.
8.
9
/
4.
5.
6.
x
1.
2.
3.
-
0
.
=
- 首先，您需要将代码包装在onload函数中，以确保只有在节点就绪后才会调用脚本
- 有许多方法可以清除屏幕以进行下一次计算。其中之一是使用一个标志变量，当完成一个操作时，该变量将被设置为true
- 对于小数，另一种方法是使用正则表达式过滤掉多余的小数 /^[+-]？\d+（.\d+）$/
<script>
function myFunction(){
let calculated= false;
const numbers = document.querySelectorAll('.number');
let display = document.getElementById('display');
let output,
zero,
decimal;
// Loop through all buttons to output value to display div
for (let i = 0; i < numbers.length; i++) {
numbers[i].addEventListener('click', (e) => {
if(calculated){
calculated= false;
display.innerHTML= "";
}
output = display.innerHTML += e.target.value;
if (output.length > 16) {
alert('Maximum input reached');
}
});
};
// Delete button functionality
document.getElementById('buttonDelete').addEventListener('click', (e) => {
if (e.target.value === 'delete') {
display.innerHTML = '';
}
});
document.querySelector('#buttonZero').addEventListener('click', (e) => {
zero = e.target.value;
if (display.innerHTML === '') {
output = display.innerHTML = zero;
} else if (display.innerHTML === output) {
output = display.innerHTML += zero;
}
});
document.querySelector('#buttonDecimal').addEventListener('click', (e) => {
decimal = e.target.value;
if (display.innerHTML === '') {
output = display.innerHTML = display.innerHTML.concat('0.');
} else if (display.innerHTML === output && display.innerHTML.indexOf(".") < 0) {
display.innerHTML = display.innerHTML.concat('.');
}
});
document.querySelector('#buttonEqual').addEventListener('click', (e) => {
if (display.innerHTML === output) {
display.innerHTML = eval(output);
calculated= true;
} else {
display.innerHTML = '';
}
});
let operators = document.querySelectorAll(".operator");
for (var i = 0; i < operators.length; i++) {
operators[i].addEventListener('click', (e) => {
operator = e.target.value;
if (display.innerHTML === '') {
display.innerHTML = display.innerHTML.concat('');
} else if (output) {
display.innerHTML = output.concat(operator);
}
});
}
}
</script>
</head>
<body onload="myFunction()">
<div class="container text-center">
<div class="row">
<div id="calculatorBody"
class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 ">
<div>
<div class="row">
<div id="display"></div>
</div>
<div id="buttonSection">
<div class="row">
<button value="delete" id="buttonDelete"
class="calculatorButton operator">Delete</button>
<button value="%" id="buttonPercent"
class="calculatorButton operator">%</button>
<button value="+" id="buttonPlus"
class="calculatorButton operator">+</button>
</div>
<div class="row">
<button value="7" id="button7" class="calculatorButton number">7</button>
<button value="8" id="button8" class="calculatorButton number">8</button>
<button value="9" id="button9" class="calculatorButton number">9</button>
<button value="/" id="buttonDivide"
class="calculatorButton operator">/</button>
</div>
<div class="row">
<button value="4" id="button4" class="calculatorButton number">4</button>
<button value="5" id="button5" class="calculatorButton number">5</button>
<button value="6" id="button6" class="calculatorButton number">6</button>
<button value="*" id="buttonMultiply"
class="calculatorButton operator">x</button>
</div>
<div class="row">
<button value="1" id="button1" class="calculatorButton number">1</button>
<button value="2" id="button2" class="calculatorButton number">2</button>
<button value="3" id="button3" class="calculatorButton number">3</button>
<button value="-" id="buttonMinus"
class="calculatorButton operator">-</button>
</div>
<div class="row">
<button value="0" id="buttonZero" class="calculatorButton zero">0</button>
<button value="." id="buttonDecimal"
class="calculatorButton decimal">.</button>
<button value="=" id="buttonEqual" class="calculatorButton equal">=</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
函数myFunction（）{
设计算=假；
const number=document.querySelectorAll（'.number'）；
let display=document.getElementById（'display'）；
让输出，
零,，
十进制的
//循环通过所有按钮输出值以显示div
for（设i=0；i{
如果（计算）{
计算=假；
display.innerHTML=“”；
}
输出=display.innerHTML+=e.target.value；
如果（输出长度>16）{
警报（“达到最大输入”）；
}
});
};
//删除按钮功能
document.getElementById（'buttonDelete'）。addEventListener（'click'，（e）=>{
如果（e.target.value==='delete'）{
display.innerHTML=''；
}
});
document.querySelector（“#buttonZero”）.addEventListener（'click'，（e）=>{
零=e.目标值；
如果（display.innerHTML==''）{
output=display.innerHTML=零；
}else if（display.innerHTML==输出）{
输出=display.innerHTML+=零；
}
});
document.querySelector（“#buttonDecimal”）.addEventListener（'click'，（e）=>{
十进制=e.目标值；
如果（display.innerHTML==''）{
output=display.innerHTML=display.innerHTML.concat（'0'）；
}else if（display.innerHTML==output&&display.innerHTML.indexOf（“.”）小于0）{
display.innerHTML=display.innerHTML.concat（'.'）；
}
});
document.querySelector（“#buttonEqual”）.addEventListener（'click'，（e）=>{
if（display.innerHTML==输出）{
display.innerHTML=eval（输出）；
计算=真；
}否则{
display.innerHTML=''；
}
});
let operators=document.queryselectoral（“.operator”）；
对于（var i=0；i{
运算符=e.target。