将 keyCode 事件添加到 javascript 计算器

Question

在键入数字而不是单击数字按钮时，我无法正确地将这个计算器转换为 function。 我添加了一些 javascript 将键代码作为数组并将正确的数字添加到我的 displayVal。 它起初可以工作，但一旦按下操作员并将数字存储为“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">&#247</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>

Answer 1

Ciao，尝试检查每个按钮单击以验证第一个数字是否为 0，如下所示：

if(displayVal === '0') displayVal = '';

看这个例子：

 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) { if(displayVal === '0') displayVal = ''; displayVal += 1; displayValElement.innerText = displayVal; return false; } return true; }; document.addEventListener("keydown", keyCodeOne, false); function keyCodeTwo (event) { if (event.which == 50 || event.keyCode == 50) { if(displayVal === '0') displayVal = ''; displayVal += '2'; displayValElement.innerText = displayVal; return false; } return true; }; document.addEventListener("keydown", keyCodeTwo, false); function keyCodeThree (event) { if (event.which == 51 || event.keyCode == 51) { if(displayVal === '0') displayVal = ''; displayVal += '3'; displayValElement.innerText = displayVal; return false; } return true; }; document.addEventListener("keydown", keyCodeThree, false); function keyCodeFour (event) { if (event.which == 52 || event.keyCode == 52) { if(displayVal === '0') displayVal = ''; displayVal += '4'; displayValElement.innerText = displayVal; return false; } return true; }; document.addEventListener("keydown", keyCodeFour, false); function keyCodeFive (event) { if (event.which == 53 || event.keyCode == 53) { if(displayVal === '0') displayVal = ''; displayVal += '5'; displayValElement.innerText = displayVal; return false; } return true; }; document.addEventListener("keydown", keyCodeFive, false); function keyCodeSix (event) { if (event.which == 54 || event.keyCode == 54) { if(displayVal === '0') displayVal = ''; displayVal += '6'; displayValElement.innerText = displayVal; return false; } return true; }; document.addEventListener("keydown", keyCodeSix, false); function keyCodeSeven (event) { if (event.which == 55 || event.keyCode == 55) { if(displayVal === '0') displayVal = ''; displayVal += '7'; displayValElement.innerText = displayVal; return false; } return true; }; document.addEventListener("keydown", keyCodeSeven, false); function keyCodeEight (event) { if (event.which == 56 || event.keyCode == 56) { if(displayVal === '0') displayVal = ''; displayVal += '8'; displayValElement.innerText = displayVal; return false; } return true; }; document.addEventListener("keydown", keyCodeEight, false); function keyCodeNine (event) { if (event.which == 57 || event.keyCode == 57) { if(displayVal === '0') displayVal = ''; 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">&#247</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>

应该能解决你的问题。