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) => {
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 = display.innerHTML.concat('.');
}
});
document.querySelector('#buttonEqual').addEventListener('click', (e) => {
if (display.innerHTML === output) {
display.innerHTML = eval(output);
} 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);
}
});
}
&#13;
#calculatorBody {
background-color: skyblue;
border-radius: 5px;
padding-bottom: 10px;
}
.calculatorButton {
display: inline-block;
background-color: #595959;
padding: 25px;
margin: 5px;
border-radius: 5px;
color: #fff;
}
.calculatorButton:active{
background-color: #fff;
color: #000;
}
#buttonZero {
width: 138px;
}
#buttonDelete {
width: 132px;
background-color: #ff3333;
}
#buttonEqual {
background-color: #33cc33;
color: #000;
}
#buttonPeriod {
background-color: #404040;
}
.number {
background-color: #404040;
}
.operator {
background-color: #a6a6a6;
}
#display {
font-family: 'Orbitron', sans-serif;
border-radius: 5px;
border: solid gray 2px;
background-color: #d9d9d9;
margin: auto;
margin-top: 30px;
margin-bottom: 15px;
width: 80%;
overflow: hidden;
display: block;
font-size: 21px;
padding-top: 12px;
height: 55px;
padding-right: 4px;
text-align: right;
}
/*#display p {
float: right;
font-size: 35px;
margin-top: -25px;
}*/
@media only screen and (max-width: 375px) {
.calculatorButton {
padding: 20px;
}
#display {
margin-top: 20px;
}
}
&#13;
<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>
&#13;
我正在制作一个不使用jQuery的基本JavaScript计算器。
计算器正常运行,但输入下一个输入时结果并不清晰,结果只是转到下一个计算结果。我还需要一次只允许小数。
任何帮助也表示赞赏,任何有关使代码更好的提示都会很好但不是必需的。我有点新手,真的想提高我的香草JavaScript技能。
提前致谢!
答案 0 :(得分:0)
首先,您需要将代码包装在onload函数中,以确保只在节点准备好后才调用脚本。
有许多方法可以清除屏幕以进行下一次计算。其中一个是使用标志变量,在完成操作时将设置为true。
对于小数,另一种方法是使用正则表达式过滤掉冗余小数
/ ^ [+ - ]?(\ d +)?\ d + $ /
或者简单地说,您可以使用indexOf函数查看是否已存在小数。 下面是根据上述建议更新的摘要。
<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>
答案 1 :(得分:0)
只需设置一个标志,该标志将检查点击的最后一个按钮是否为等号,如果显示其他值连接的话。
const numbers = document.querySelectorAll('.number');
let display = document.getElementById('display');
let output,
zero,
decimal, equal = false;
// Loop through all buttons to output value to display div
for (let i = 0; i < numbers.length; i++) {
numbers[i].addEventListener('click', (e) => {
if (equal) {
output = display.innerHTML = e.target.value;
}else {
output = display.innerHTML += e.target.value;
}
if (output.length > 16) {
alert('Maximum input reached');
}
equal = false;
});
};
// Delete button functionality
document.getElementById('buttonDelete').addEventListener('click', (e) => {
equal = false;
if (e.target.value === 'delete'
) {
display.innerHTML = '';
}
});
document.querySelector('#buttonZero').addEventListener('click', (e) => {
equal = false;
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) => {
equal = false;
decimal = e.target.value;
if (display.innerHTML === '') {
output = display.innerHTML = display.innerHTML.concat('0.');
} else if (display.innerHTML === output) {
display.innerHTML = display.innerHTML.concat('.');
}
});
document.querySelector('#buttonEqual').addEventListener('click', (e) => {
equal = true;
if (display.innerHTML === output) {
display.innerHTML = eval(output);
}
else {
display.innerHTML = '';
}
});
let operators = document.querySelectorAll(".operator");
for (var i = 0; i < operators.length; i++) {
operators[i].addEventListener('click', (e) => {
equal = false;
operator = e.target.value;
if (display.innerHTML === '') {
display.innerHTML = display.innerHTML.concat('');
} else if (output) {
display.innerHTML += operator;
}
});
}
&#13;
#calculatorBody {
background-color: skyblue;
border-radius: 5px;
padding-bottom: 10px;
}
.calculatorButton {
display: inline-block;
background-color: #595959;
padding: 25px;
margin: 5px;
border-radius: 5px;
color: #fff;
}
.calculatorButton:active {
background-color: #fff;
color: #000;
}
#buttonZero {
width: 138px;
}
#buttonDelete {
width: 132px;
background-color: #ff3333;
}
#buttonEqual {
background-color: #33cc33;
color: #000;
}
#buttonPeriod {
background-color: #404040;
}
.number {
background-color: #404040;
}
.operator {
background-color: #a6a6a6;
}
#display {
font-family: 'Orbitron', sans-serif;
border-radius: 5px;
border: solid gray 2px;
background-color: #d9d9d9;
margin: auto;
margin-top: 30px;
margin-bottom: 15px;
width: 80%;
overflow: hidden;
display: block;
font-size: 21px;
padding-top: 12px;
height: 55px;
padding-right: 4px;
text-align: right;
}
/*#display p {
float: right;
font-size: 35px;
margin-top: -25px;
}*/
@media only screen and (max-width: 375px) {
.calculatorButton {
padding: 20px;
}
#display {
margin-top: 20px;
}
}
&#13;
<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>
&#13;