functions executed once and addEventlistener has no effect

Question

I am manipulating the background color of 3 table cells depending on keydown, keypress and keyup events.
html

<table border="1px">
  <tr><th>Event</th><th>Action</th><th>Value</th></tr>
  <tr><td>Keydown</td><td id="down"></td><td id="downvalue"></td></tr>
  <tr><td>Keypress</td><td id="press"></td><td id="pressvalue"></td></tr>
  <tr><td>Keyup</td><td id="up"></td><td id="upvalue"></td></tr>
</table>
<input type="text" id="txt" /><br />

JS

window.onload = function()
{
document.getElementById("txt").addEventListener("Keydown", keyisdown(), false);
document.getElementById("txt").addEventListener("Keyup", keyisup(), false);
document.getElementById("txt").addEventListener("Keypress", keyispress(), false);
}

function keyisdown()
{
 document.getElementById("press").style.backgroundColor = "white"; 
 document.getElementById("up").style.backgroundColor = "white";
 document.getElementById("down").style.backgroundColor = "red";
} 
// above function is repeated twice for keyisup and keyispress

I am supposed to type into the field, and change the background color respectively, but all run once upon page load or refresh and never again, how can i solve that? thanks.

Answer 1

Check this out:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Here you have all you need to know to use addEventListener

In some old browsers this is not supported.

You can do something similar to addEventListener:

var element = document.getElementById("element");
element.onclick = function () {
    // 
}

Answer 2

window.onload = function()
{
document.getElementById("txt").addEventListener("keydown", keyisdown, false);
document.getElementById("txt").addEventListener("keyup", keyisup, false);
document.getElementById("txt").addEventListener("keypress", keyispress, false);
}

function keyisdown()
{
 document.getElementById("press").style.backgroundColor = "white"; 
 document.getElementById("up").style.backgroundColor = "white";
 document.getElementById("down").style.backgroundColor = "red";
} 
function keyisup()
{
 document.getElementById("press").style.backgroundColor = "white"; 
 document.getElementById("up").style.backgroundColor = "red";
 document.getElementById("down").style.backgroundColor = "white";
} 

function keyispress()
{
 document.getElementById("press").style.backgroundColor = "red"; 
 document.getElementById("up").style.backgroundColor = "white";
 document.getElementById("down").style.backgroundColor = "white";
} 

<table border="1px">
  <tr><th>Event</th><th>Action</th><th>Value</th></tr>
  <tr><td>Keydown</td><td id="down"></td><td id="downvalue"></td></tr>
  <tr><td>Keypress</td><td id="press"></td><td id="pressvalue"></td></tr>
  <tr><td>Keyup</td><td id="up"></td><td id="upvalue"></td></tr>
</table>
<input type="text" id="txt" /><br />

Answer 3

Solved it,basically i used another IDE, and things worked fine! It seems the one i was using was buggy. [ Also paranthesis () had to be removed as stated by user KittyCat below.]

Answer 4

First error is that you are executing the functions on window.load. only pass name of the function to the eventListener, remove () after the function name.

Second: Use .onkeydown instead of attaching an event listener.

Third: I hope that you are not trying to change color of the cells on pressing arrowkeyup and arrowkeydown. The functions onkeydown and onkeyup do not register which key was pressed. You have to use .keyCode for that.

In the below example I have only included .onkeydown function which changes color of down to green when arrowkeyup is pressed, and to red when arrowkeydown is pressed.

window.onload = function()
{

document.getElementById("txt").onkeydown =   function(e){
  document.getElementById("press").style.backgroundColor = "white"; 
  document.getElementById("up").style.backgroundColor = "white";
  var code = e.keyCode;
  if(code==40){
    document.getElementById("down").style.backgroundColor = "red";
  }
  else if(code==38){
    document.getElementById("down").style.backgroundColor = "green";
  }
}

}

<table border="1px">
  <tr><th>Event</th><th>Action</th><th>Value</th></tr>
  <tr><td>Keydown</td><td id="down"></td><td id="downvalue"></td></tr>
  <tr><td>Keypress</td><td id="press"></td><td id="pressvalue"></td></tr>
  <tr><td>Keyup</td><td id="up"></td><td id="upvalue"></td></tr>
</table>
<input type="text" id="txt"/><br />