How to Show Information When Enter Key is Pressed in JavaScript?

Question

I have a javascript page I am working on where I want information to be displayed when the mouse is over the "Show Info" button and the enter key is pressed. I have tried several different methods and I cannot figure out what is wrong. I am quite confused, as this is for a lesson I have been working on and I have followed the instructions as they were states, yet I somehow cannot figure out what I have done wrong. Any help and guidance would greatly be appreciated.

Here is my code:

var content = document.getElementById("berriesContent");
var button = document.getElementById("showMoreBerries");

button.onclick = function BC() {
  if (content.className == "open") {
    content.className = "";
    button.innerHTML = "Show Info";
  } else {
    content.className = "open";
    button.innerHTML = "Hide Info";
  }
};

function mouseinBerries() {
  document.getElementById("showMoreBerries").style.background = "#001a33";
}

function mouseoutBerries() {
  document.getElementById("showMoreBerries").style.background = " #1594e5";
}
document.keypress(function(e) {
  if (e.which == 13) {
    ("#berriescontent").addClass("show");
  }
})

body {
  background-image: url(Photos/Books.jpg);
  background-size: 75%;
  background-position: center;
  text-align: center;
  font-family: "Lucida Console", Monaco, monospace;
}

#Main {
  width: 100px;
  height: 70px;
  background: #f6e5b1;
  margin: 25px auto;
  border: #660000;
  border-style: ridge;
  border-width: 7px
}

img {
  height: 275px;
}

#berriesContent {
  width: 50%;
  padding: 5px;
  font-family: Sans-Serif;
  font-size: 18px;
  color: #444;
  margin: 0 auto;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.01s;
}

#berriesContent.open {
  max-height: 1000px;
  background-color: burlywood;
  transition: max-height 0.01s;
}

#showMoreBerries {
  width: 20%;
  background: #1594e5;
  color: #fff;
  font-family: sans-serif;
  display: block;
  cursor: pointer;
  text-align: center;
  padding: 15px;
  margin: 10px auto;
}

<body bgcolor="#ff6633">
  <div id="Main">
    <h1> Menu</h1>
  </div>
  <center>
    <div id="berriesPic">
      <img src="photos/berries.jpg"><img></div>
    <a id="showMoreBerries" onmouseover="mouseinBerries()" onmouseout="mouseoutBerries()">Show Info</a>
  </center>
  <div id=b erriesContent>
    <p>This is the first photo I took after receiving a camera from my Grandfather.I was playing around with the settings and really loved the way that this photo in particular turned out. The red color against the more muted background stood out to me.</p>
  </div>
</body>

[How can I debug my JavaScript code?](https://stackoverflow.com/q/988363/215552) — Heretic Monkey, Jan 19 '18 at 17:14

Angel Politis · Accepted Answer · 2018-01-19T22:13:19.067

Your question is rather unclear as to what you aim to accomplish. If I'm guessing correctly and you want to toggle the information box when Enter is pressed just like you do on click, this solution will work for you.

Errors in your code:

There is no such function as document.keypress. You should set document.onkeypress instead: document.onkeypress = function(e) {...}
The code ("#berriescontent").addClass("show") inside your if statement is invalid.
The way you've written your code will show the information regardless of whether the mouse hovers the button or not. You need to use a flag in the mouseover event of your button and check against it in keypress event of the document.
Using id=b erriesContent instead of id="berriesContent" in your HTML.

Give a look at the following snippet to see how it works.

Snippet:

/* ----- JavaScript ----- */
var
  buttonHovered = false,
  content = document.getElementById("berriesContent"),
  button = document.getElementById("showMoreBerries");

/* Event handlers. */
function showInfo () {
  var classList = content.classList;
  
  if (classList.contains("open")) {
    classList.remove("open");
    button.innerHTML = "Show Info";
  } else {
    classList.add("open");
    button.innerHTML = "Hide Info";
  }
}

function mouseinBerries () {
  button.style.background = "#001a33";
  buttonHovered = true;
}

function mouseoutBerries () {
  button.style.background = "#1594e5";
  buttonHovered = false;
}

/* Set the 'click' and 'keypress' events. */
button.onclick = showInfo;
document.onkeypress = function (e) {
  if (e.which == 13 && buttonHovered) showInfo(e);
}

/* ----- CSS ----- */
body {
  text-align: center;
  font-family: "Lucida Console", Monaco, monospace;
}

#Main {
  width: 100px;
  height: 70px;
  background: #f6e5b1;
  margin: 25px auto;
  border: #660000;
  border-style: ridge;
  border-width: 7px
}

#berriesContent {
  width: 50%;
  padding: 5px;
  font-family: Sans-Serif;
  font-size: 18px;
  color: #444;
  margin: 0 auto;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.01s;
}

#berriesContent.open {
  max-height: 1000px;
  background-color: burlywood;
  transition: max-height 0.01s;
}

#showMoreBerries {
  width: 20%;
  background: #1594e5;
  color: #fff;
  font-family: sans-serif;
  display: block;
  cursor: pointer;
  text-align: center;
  padding: 15px;
  margin: 10px auto;
}

<!----- HTML ----->
<body bgcolor="#ff6633">
  <div id="Main">
    <h1> Menu</h1>
  </div>
  <center>
    <a id="showMoreBerries" onmouseover="mouseinBerries()" onmouseout="mouseoutBerries()">Show Info</a>
  </center>
  <div id="berriesContent">
    <p>This is the first photo I took after receiving a camera from my Grandfather.I was playing around with the settings and really loved the way that this photo in particular turned out. The red color against the more muted background stood out to me.</p>
  </div>
</body>

Update:

^{(In response to this comment)}

To be able to use the same functionality this for many button-contentBox pairs, you will have to change your entire code:

You will need to use a class instead of an id shared by all buttons and another one shared by all content boxes.
You will need to iterate over every button to attach the event handlers for the click, mouseover and mouseout events.
You will have to change the functionality of the flag, instead of a mere true or false, to actually cache the hovered button.

Check out the following snippet to give a look at the code.

Snippet:

/* ----- JavaScript ----- */
var
  buttonHovered = null,
  buttons = document.querySelectorAll(".show-more");

/* Event handler. */
function showInfo (e, id) {
  /* Cache the data-id of the button, the content box and its classlist. */
  var
    id = this.dataset.id,
    content = document.querySelector(".hidden-content[data-id='" + id + "']"),
    classList = content.classList;
  
  /* Check whether the classlist contains 'open'. */
  if (classList.contains("open")) {
    classList.remove("open");
    this.innerHTML = "Show Info";
  } else {
    classList.add("open");
    this.innerHTML = "Hide Info";
  }
}

/* Set the 'click', 'mouseover' and 'mouseout' events for the buttons. */
[].forEach.call(buttons, function (button) {
  button.onclick = showInfo;
  button.onmouseover = function () {
    /* Set the background and the flag. */
    button.style.background = "#001a33";
    buttonHovered = button;
  };
  button.onmouseout = function () {
    /* Set the background and the flag. */
    button.style.background = "#1594e5";
    buttonHovered = null;
  };
});

/* Set the 'keypress' event for the document. */
document.onkeypress = function (e) {
  /* Check whether the clicked button is 'Enter' and if a button is hovered. */
  if (e.which == 13 && buttonHovered) {
    /* Call the function passing the button as the context and the event. */
    showInfo.call(buttonHovered, e);
  }
}

/* ----- CSS ----- */
body {
  text-align: center;
  font-family: "Lucida Console", Monaco, monospace;
}

#Main {
  width: 100px;
  height: 70px;
  background: #f6e5b1;
  margin: 25px auto;
  border: #660000;
  border-style: ridge;
  border-width: 7px
}

.hidden-content {
  width: 50%;
  padding: 5px;
  font-family: Sans-Serif;
  font-size: 18px;
  color: #444;
  margin: 0 auto;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.01s;
}

.hidden-content.open {
  max-height: 1000px;
  background-color: burlywood;
  transition: max-height 0.01s;
}

.show-more {
  width: 20%;
  background: #1594e5;
  color: #fff;
  font-family: sans-serif;
  display: block;
  cursor: pointer;
  text-align: center;
  padding: 15px;
  margin: 10px auto;
}

<!----- HTML ----->
<body bgcolor="#ff6633">
  <div id="Main">
    <h1> Menu</h1>
  </div>
  <center>
    <a class="show-more" data-id="0">Show Info</a>
    <a class="show-more" data-id="1">Show Info</a>
    <a class="show-more" data-id="2">Show Info</a>
  </center>
  <div class="hidden-content" data-id="0">
    <p>This is the first photo I took after receiving a camera from my Grandfather.I was playing around with the settings and really loved the way that this photo in particular turned out. The red color against the more muted background stood out to me.</p>
  </div>
  <div class="hidden-content" data-id="1">
    <p>This is the second photo I took after receiving a camera from my Grandfather.I was playing around with the settings and really loved the way that this photo in particular turned out. The red color against the more muted background stood out to me.</p>
  </div>
  <div class="hidden-content" data-id="2">
    <p>This is the third photo I took after receiving a camera from my Grandfather.I was playing around with the settings and really loved the way that this photo in particular turned out. The red color against the more muted background stood out to me.</p>
  </div>
</body>

When I tried to add a second photo with a caption, I followed the code and the second box will not open as the first does. How can I fix this? — Teenbookhoarder, Jan 19 '18 at 20:26
You will have to change your entire code to achieve that for many. Check out my edit @Teenbookhoarder. — Angel Politis, Jan 19 '18 at 22:13

How to Show Information When Enter Key is Pressed in JavaScript?

1 Answers1