How to modify onKeyDown event with Javascript function

Question

I'm working on a project in which a javascript function runs when either 1) a button is clicked or 2) the "return" key is pressed. The javascript function sets a div's visibility to "visible" and changes the "onclick" and "onKeyDown" attributes to run a different function when clicked/pressed a second time.

For example, clicking the button (or pressing return) once will make the div appear, and doing it twice should make it disappear.

The problem is that I cannot figure out how to make the javascript change the "onKeyDown" attribute when the function is triggered. Is this possible?

I based my code off of this answer: Call a function when the enter button is pressed via Javascript

Here is my code so far:

function visible() {
document.getElementById("box").style.visibility = "visible";
document.getElementById("button").onclick = hidden;
document.body.onKeyDown = "if(event.keyCode==13) hidden()";
}

function hidden() {
   document.getElementById("box").style.visibility = "hidden";
    document.getElementById("button").onclick = visible;
    document.body.onKeyDown = "if(event.keyCode==13) visible()";
}

#box {
  visibility:hidden;
  width:200px;
  height:200px;
  background:red;
}


#button {
  width:120px;
  height:50px;
  background:lightblue;
}

<html>

<body onKeyDown="if(event.keyCode==13) visible()">

<div id="box"></div>
<div id="button" onclick="visible()" ></div>

</body>

</html>

Clicking the blue box will make the red box appear, and so will pressing return; but pressing return again will not make the box disappear.

Pretty well written for a first question!

rydwolf
– rydwolf

2019-05-18 03:02:47 +00:00
Commented May 18, 2019 at 3:02 — rydwolf
– rydwolf, Commented May 18, 2019 at 3:02

rydwolf · Accepted Answer · 2019-05-18 03:42:09Z

2

The onkeydown property for JavaScript is case sensitive. Thus, using onKeyDown will set a different function to hidden, while the body's keydown action is still visible().

To fix it, change onKeyDown to onkeydown in both files. It's kinda confusing at first since it doesn't follow the usual capitalization syntax, but all HTML attributes are lowercase.

Also, set onkeydown to a function, rather than a string:

document.body.onkeydown = function(){if (e.keyCode==13) visible()};

Lastly, e is not defined. Replace it with event, and it should work.

edited May 18, 2019 at 3:42

answered May 18, 2019 at 3:04

rydwolf

1,5581 gold badge14 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

htmlcat Over a year ago

Thanks for your help. Your code definitely seems to be changing the "onkeydown" attribute; because clicking on the blue button twice and then pressing return does not make the red div appear. But it still isn't actually making the red div disappear. Jsfiddle: jsfiddle.net/uqz1xoya

rydwolf Over a year ago

@htmlcat e is not defined. Try changing to event.

AgentS Over a year ago

@htmlcat alternatively you could replace your entire javascript with just jsfiddle.net/ganeshie8/7t6ry4v1/7

rydwolf Over a year ago

@rsadhvika Post that in your answer...it'd make it more original.

AgentS · Accepted Answer · 2019-05-18 03:43:05Z

function visible() {
  document.getElementById("box").style.visibility = "visible";
  document.getElementById("button").onclick = hidden;
  document.body.onkeydown = function() {
    if (event.keyCode == 13) hidden()
  };
}

function hidden() {
  document.getElementById("box").style.visibility = "hidden";
  document.getElementById("button").onclick = visible;
  document.body.onkeydown = function() {
    if (event.keyCode == 13) visible()
  };
}

#box {
  visibility: hidden;
  width: 200px;
  height: 200px;
  background: red;
}

#button {
  width: 120px;
  height: 50px;
  background: lightblue;
}

<html>

<body onKeyDown="if(event.keyCode==13) visible()">

  <div id="box"></div>
  <div id="button" onclick="visible()"></div>

</body>

</html>

Collectives™ on Stack Overflow

How to modify onKeyDown event with Javascript function

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related