While trying to expand the interface of my JS calculator project, I decided to add a keyboard interface so that you can write directly in the input box with your keyboard. I also decided to have an option to press the enter key and get the calculations processed and directly displayed on the input box.
When I made a function to check the keyboard event, it showed that the event was not 'Enter', even though the key I pressed was enter (I console.logged what the event was, and was it enter?. The first log showed the event is enter, the second log showed that the event is not equal to enter). Here's the code of the function-
function key_type(event) {
buttonElement = document.getElementById('input').value
if (event === 'Backspace') {
if (buttonElement === '') {}
else {buttonElement --}
}
if (event === 'Enter') {
equal()
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Oncalc</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
body {font-family:Poppins;}
button {padding:1.5%;margin:1.5%;border-radius: 10%;border:none; transition: 0.3s;}
button:hover {background-color: #cccccc;}
#operator {background-color: #ff6600;}
#operator:hover {background-color: #d7671c;}
input {
float: right;
width: 70vh;
height: 15vh;
padding: 10px;
font-size: 7vh;
border: 0.4vh solid #8d8d8d;
border-radius: 1vh;
box-sizing: border-box;
text-align: left;
outline: none;
transition: 0.5s;
margin-right: 15%;
font-style: italic;
}
input:focus{
border: 0.4vh solid #d7671c;
transition: 0.5s;
}
input:placeholder-shown {
color:#8d8d8d;
transition: 0.5s;
}
input:focus::placeholder {
color: #ffae79;
transition: 0.5s;
}
</style>
</head>
<body>
<button onclick="buttonElement += '1';" onmousedown="showtype('1')">1</button>
<button onclick="buttonElement += '2';" onmousedown="showtype('2')">2</button>
<button onclick="buttonElement += '3';" onmousedown="showtype('3')">3</button>
<button onclick="buttonElement += '4';" onmousedown="showtype('4')">4</button>
<button onclick="buttonElement += '5';" onmousedown="showtype('5')">5</button>
<button onclick="buttonElement += '6';" onmousedown="showtype('6')">6</button>
<br>
<button onclick="buttonElement += '7';" onmousedown="showtype('7')">7</button>
<button onclick="buttonElement += '8';" onmousedown="showtype('8')">8</button>
<button onclick="buttonElement += '9';" onmousedown="showtype('9')">9</button>
<button onclick="buttonElement += '0';" onmousedown="showtype('0')">0</button>
<button id="operator" onclick="buttonElement += '(';" onmousedown="showtype('(');">(</button>
<button id="operator" onclick="buttonElement += ')';" onmousedown="showtype(')');">)</button>
<input id="input" placeholder="Ex - 1+3" onkeyup="key_type(event)">
<br>
<button id="operator" onclick="buttonElement += '-';" onmousedown="showtype('-')">-</button>
<button id="operator" onclick="buttonElement += '+';" onmousedown="showtype('+')">+</button>
<button id="operator" onclick="buttonElement += '/';" onmousedown="showtype('/')">/</button>
<button id="operator" onclick="buttonElement += '*';" onmousedown="showtype('x')">X</button>
<button id="operator" onclick="buttonElement += '**';" onmousedown="showtype('**')">**</button>
<button id="operator" onclick="backspace('1');">CE</button>
<br>
<button id="operator" onclick="backspace('all');">C</button>
<button id="operator" onclick="equal();">=</button>
<script>
buttonElement = ''
function equal() {
document.getElementById('input').value = eval(buttonElement);
buttonElement = eval(buttonElement);
}
function showtype(char) {
document.getElementById('input').value += char
}
function key_type(event) {
buttonElement = document.getElementById('input').value
if (event === 'Backspace') {
if (buttonElement === '') {}
else {buttonElement --}
}
if (event === 'Enter') {
equal()
}
}
function backspace(cut) {
if (cut === 'all') {
document.getElementById('input').value = ''
buttonElement = ''
}
else if (cut === '1') {
str = document.getElementById('input').value;
modify_str = str.substring(0, str.length - 1);
document.getElementById('input').value = modify_str;
buttonElement = buttonElement.substring(0,str.length - 1)
}
}
</script>
</body>
</html>I will be extremely grateful if you could help me.
You need to use 'event.key' in the if statement when comparing with, for example, 'Enter', or any other keys, because you need the 'key' property to know what was pressed.