【发布时间】：2020-08-09 14:02:29
【问题描述】：
在输入数字而不是单击数字按钮时，我无法让此计算器正常工作。我添加了一些将键代码作为数组并将正确的数字添加到我的 displayVal 的 javascript。它起初可以工作，但一旦按下操作员并将数字存储为“pendingVal”，数字“0”就会在输入时添加到数字的开头，并返回超过 10 的数字的奇数计算。如果有人看到问题或对此有另一种解决方法，仅涉及 JS，将不胜感激。
var oneBtn = document.getElementById("btn1");
var twoBtn = document.getElementById("btn2");
var threeBtn = document.getElementById("btn3");
var fourBtn = document.getElementById("btn4");
var fiveBtn = document.getElementById("btn5");
var sixBtn = document.getElementById("btn6");
var sevenBtn = document.getElementById("btn7");
var eightBtn = document.getElementById("btn8");
var nineBtn = document.getElementById("btn9");
var zeroBtn = document.getElementById("btn0");
var decimalBtn = document.getElementById("btnDec");
var clearBtn = document.getElementById("btnClear");
var percentBtn = document.getElementById("btnPer");
var plusMinBtn = document.getElementById("btnPM");
var displayValElement = document.getElementById("output");
var calcNumBtns = document.getElementsByClassName("calcNum");
var calcOperators = document.getElementsByClassName("calcOp");
var displayVal = '0';
var pendingVal;
var evalStringArray = [];
var updateDisplayVal = (clickObj) => {
var btnText = clickObj.target.innerText;
if (displayVal === '0')
displayVal = '';
displayVal += btnText;
displayValElement.innerText = displayVal;
}
var performOperation = (clickObj) => {
var operator = clickObj.target.innerText;
switch (operator) {
case '+':
pendingVal = displayVal;
displayVal = '0';
displayValElement.innerText = displayVal;
evalStringArray.push(pendingVal);
evalStringArray.push('+');
break;
case '-':
pendingVal = displayVal;
displayVal = '0';
displayValElement.innerText = displayVal;
evalStringArray.push(pendingVal);
evalStringArray.push('-');
break;
case 'x':
pendingVal = displayVal;
displayVal = '0';
displayValElement.innerText = displayVal;
evalStringArray.push(pendingVal);
evalStringArray.push('*');
break;
case '÷':
pendingVal = displayVal;
displayVal = '0';
displayValElement.innerText = displayVal;
evalStringArray.push(pendingVal);
evalStringArray.push('/');
break;
case '=':
evalStringArray.push(displayVal);
var evaluation = eval(evalStringArray.join(' '));
displayVal = evaluation + '';
displayValElement.innerText = displayVal;
evalStringArray = [];
break;
default:
break;
}
}
for (let i = 0; i < calcNumBtns.length; i++) {
calcNumBtns[i].addEventListener('click', updateDisplayVal, false);
}
for (let i = 0; i < calcOperators.length; i++) {
calcOperators[i].addEventListener('click', performOperation, false);
}
// Added to remove initial 0 for displayVal when typing
var keys = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57];
for (let i = 0; i < keys.length; i++) {
if (keyCode = keys[i] && displayVal == '0') {
displayVal = '';
}
}
// Adds ability to type #'s to buttons
function keyCodeOne (event) {
if (event.which == 49 || event.keyCode == 49) {
displayVal += 1;
displayValElement.innerText = displayVal;
return false;
}
return true;
};
document.addEventListener("keydown", keyCodeOne, false);
function keyCodeTwo (event) {
if (event.which == 50 || event.keyCode == 50) {
displayVal += '2';
displayValElement.innerText = displayVal;
return false;
}
return true;
};
document.addEventListener("keydown", keyCodeTwo, false);
function keyCodeThree (event) {
if (event.which == 51 || event.keyCode == 51) {
displayVal += '3';
displayValElement.innerText = displayVal;
return false;
}
return true;
};
document.addEventListener("keydown", keyCodeThree, false);
function keyCodeFour (event) {
if (event.which == 52 || event.keyCode == 52) {
displayVal += '4';
displayValElement.innerText = displayVal;
return false;
}
return true;
};
document.addEventListener("keydown", keyCodeFour, false);
function keyCodeFive (event) {
if (event.which == 53 || event.keyCode == 53) {
displayVal += '5';
displayValElement.innerText = displayVal;
return false;
}
return true;
};
document.addEventListener("keydown", keyCodeFive, false);
function keyCodeSix (event) {
if (event.which == 54 || event.keyCode == 54) {
displayVal += '6';
displayValElement.innerText = displayVal;
return false;
}
return true;
};
document.addEventListener("keydown", keyCodeSix, false);
function keyCodeSeven (event) {
if (event.which == 55 || event.keyCode == 55) {
displayVal += '7';
displayValElement.innerText = displayVal;
return false;
}
return true;
};
document.addEventListener("keydown", keyCodeSeven, false);
function keyCodeEight (event) {
if (event.which == 56 || event.keyCode == 56) {
displayVal += '8';
displayValElement.innerText = displayVal;
return false;
}
return true;
};
document.addEventListener("keydown", keyCodeEight, false);
function keyCodeNine (event) {
if (event.which == 57 || event.keyCode == 57) {
displayVal += '9';
displayValElement.innerText = displayVal;
return false;
}
return true;
};
document.addEventListener("keydown", keyCodeNine, false);
function keyCodeZero (event) {
if (event.which == 48 || event.keyCode == 48) {
displayVal += '0';
displayValElement.innerText = displayVal;
return false;
}
return true;
};
document.addEventListener("keydown", keyCodeZero, false);<section id="mainContainer">
<div id="calcContainer">
<form id="form" name="form">
<div id="displayBox">
<div id="output" class="textView">0</div>
</div>
</form>
<table id="table" class="calcTable" cellspacing="10px">
<tbody>
<tr>
<td><button id="btnClear" class="calcBtn tr1">AC</button></td>
<td><button id="btnPM" class="calcBtn tr1">+/-</button></td>
<td><button id="btnPer" class="calcBtn tr1">%</button></td>
<td><button id="btnDiv" class="calcBtn calcOp tr2">÷</button></td>
</tr>
<tr>
<td><button id="btn9" class="calcBtn calcNum">7</button></td>
<td><button id="btn8" class="calcBtn calcNum">8</button></td>
<td><button id="btn7" class="calcBtn calcNum">9</button></td>
<td><button id="btnMul" class="calcBtn calcOp tr2">x</button></td>
</tr>
<tr>
<td><button id="btn4" class="calcBtn calcNum">4</button></td>
<td><button id="btn5" class="calcBtn calcNum">5</button></td>
<td><button id="btn6" class="calcBtn calcNum">6</button></td>
<td><button id="btnSub" class="calcBtn calcOp tr2">-</button></td>
</tr>
<tr>
<td><button id="btn1" class="calcBtn calcNum">1</button></td>
<td><button id="btn2" class="calcBtn calcNum">2</button></td>
<td><button id="btn3" class="calcBtn calcNum">3</button></td>
<td><button id="btnAdd" class="calcBtn calcOp tr2">+</button></td>
</tr>
<tr>
<td colspan="2"><button id="btn0" class="calcBtn calcNum">0</button></td>
<td><button id="btnDec" class="calcBtn">.</button></td>
<td><button id="btnEq" class="calcBtn calcOp tr2">=</button></td>
</tr>
</tbody>
</table>
</div>
</section>【问题讨论】：
标签： javascript html function events key