Is it possible for this code to take two inputs directly from the browser window? If I press q, then 4000 should be incremented by 1. Similarly, if I press w, then 3000 should be incremented by 1. When both keys are pressed at the same time, both numbers should be incremented. However, when I release one of the keys (let's say q), the other key (w) stops working as well. Is my logic incorrect or does the keydown function work in this manner? Any possible solutions would be appreciated. Thank you.
HTML:
<div id="num1">3000</div>
<div id="num2">4000</div>
<div >w =<span id="w"></span></div>
<div >q =<span id="q"></span></div>
<div>Last raised key=<span id="deleted"></span></div>
JS:
<script>
keylogger={};
window.addEventListener("keydown",function(e){
keylogger[e.key]=true;
document.getElementById("w").innerHTML=keylogger['w'];
document.getElementById("q").innerHTML=keylogger['q'];
div1=document.getElementById("num1") ;
div2=document.getElementById("num2") ;
if(keylogger['w'] && keylogger['q']){
value=parseInt(div1.innerHTML);
div1.innerHTML=++div1.innerHTML;
value=parseInt(div2.innerHTML);
div2.innerHTML=++div2.innerHTML;
}
if(keylogger['w']){
value=parseInt(div1.innerHTML);
div1.innerHTML=++div1.innerHTML;
}
if(keylogger['q']){
value=parseInt(div2.innerHTML);
div2.innerHTML=++div2.innerHTML;
}
});
window.addEventListener("keyup",function(e){
document.getElementById("deleted").innerHTML=e.key;
delete keylogger[e.key];
})
</script>