functions executed once and addEventlistener has no effect

381
January 07, 2017, at 9:02 PM

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

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 />

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

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 () {
    // 
}
READ ALSO
How to post base64 png in &lt;meta property=&ldquo;og:image&rdquo; &gt;?

How to post base64 png in <meta property=“og:image” >?

I want share a base64 png file in meta og:image propertyI try but its not working

412
Keep state of background slider on page reload/page swich

Keep state of background slider on page reload/page swich

I need help to get a background slider that i created to not reset from the beginning if i switch pages on a site just keep the state and keep sliding

394
React-router multiple component onEnter in case of auth?

React-router multiple component onEnter in case of auth?

I am creating one app that has 2 component for given 1 path

501