JavaScript keydown 事件 e.shiftKey + e.keyCode 8 星号

Question

I'm working on a project for school and I'm writing a calculator.
I got to the point where I'm programming the keydown event, the numbers aren't causing any problems, but I got stuck at the %, * and +.

The output I receive in the console.log is correct - I'm getting the asterisk * each time I press shift + 8, not when I press shift or 8 individually. But what I'm getting in the #output.innerHTML is " *8 ", since I also have an event listener for number 8, as seen above.

function forDisplay(value) {
      document.getElementById("output").innerHTML += value;
 
    }

document.addEventListener('keydown', (event)=>{
 if(event.keyCode === 56 || event.keyCode === 104){
        document.getElementById("output").innerHTML += 8
    }

 if(event.shiftKey && event.keyCode === 56){    
        console.log('*')
        forDisplay('*')
    }

})

Is there any way I can make the code work in the output too, since it's working correctly in the console.log? Thanks!

Answer 1

I see your problem - the first if is firing, and so is the second if when you press Shift and 8. Simply check for the Shift and 8 first, then add an else if statement, in case the condition is not true.

 document.addEventListener('keydown', (event) => { if (event.shiftKey && event.keyCode === 56) { console.log('*') document.getElementById("output").innerHTML += "*"; } else if (event.keyCode === 56 || event.keyCode === 104) { document.getElementById("output").innerHTML += 8 } })

 <div id="output"></div>

Also, here's my attempt at a calculator, complete with regular numbers, addition, subtraction, multiplication, division, exponent, Num Pad, designated symbols for multiplication and division, prevention for operands next to each other (things like 132+*837 ), backspace, clearing options, and evaluation for Enter key, equal to, or Evaluate button:

 var outputEl = document.getElementById("output") function CheckLastChar() { if (["×", "+", "-", "÷", "^"].includes(outputEl.innerText.slice(-1))) { outputEl.innerText = outputEl.innerText.slice(0, -1) } } document.addEventListener('keydown', (event) => { key = String.fromCharCode(event.keyCode); if (event.shiftKey) { if (key == "8") { CheckLastChar(); outputEl.innerText += "×"; } else if (key == "6") { CheckLastChar(); outputEl.innerText += "^"; } else if (event.keyCode == 187) { CheckLastChar(); outputEl.innerText += "+"; } } else { if ([...Array(10).keys()].map(el => el.toString()).includes(key)) { outputEl.innerText += key; } else if (event.keyCode == 106) { CheckLastChar(); outputEl.innerText += "×"; } else if (event.keyCode == 107) { CheckLastChar(); outputEl.innerText += "+"; } else if (event.keyCode == 189 || event.keyCode == 109) { CheckLastChar(); outputEl.innerText += "-"; } else if (event.keyCode == 191 || event.keyCode == 111) { CheckLastChar(); outputEl.innerText += "÷"; } else if (event.keyCode == 8) { outputEl.innerText = outputEl.innerText.slice(0, -1); } else if (event.keyCode == 13) { document.querySelectorAll("button")[0].click(); } else if (event.keyCode == 187) { document.querySelectorAll("button")[0].click(); } } }) document.querySelectorAll("button")[0].addEventListener("click", () => { stringToEvaluate = document.getElementById("output").innerText.replace("×", "*").replace("÷", "/").replace("^", "**"); console.clear(); try { console.log(eval(stringToEvaluate)); } catch { console.log("Unexpected error or invalid expression."); } }) document.querySelectorAll("button")[1].addEventListener("click", () => { outputEl.innerText = ""; })

 <div id="output"></div> <button>Evaluate!</button> <button>Clear!</button>