在 JavaScript 中按下 Enter 键时如何显示信息？答案

【问题标题】：How to Show Information When Enter Key is Pressed in JavaScript?在 JavaScript 中按下 Enter 键时如何显示信息？
【发布时间】：2018-01-19 17:08:20
【问题描述】：

我正在处理一个 javascript 页面，当鼠标悬停在“显示信息”按钮上并按下回车键时，我希望在该页面上显示信息。我尝试了几种不同的方法，但我无法弄清楚出了什么问题。我很困惑，因为这是我一直在学习的课程，并且我按照说明进行操作，但不知何故我无法弄清楚我做错了什么。任何帮助和指导将不胜感激。

这是我的代码：

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?

标签： javascript function show-hide keypress onkeypress

【解决方案1】：

您的问题不太清楚您的目标是什么。如果我猜对了，并且您想在按下 Enter 时切换信息框，就像您在单击时一样，那么此解决方案将适合您。

代码中的错误：

没有document.keypress这样的功能。你应该设置 document.onkeypress 代替：document.onkeypress = function(e) {...}
if 语句中的代码 ("#berriescontent").addClass("show") 无效。
无论鼠标是否悬停在按钮上，您编写代码的方式都会显示信息。您需要在按钮的mouseover 事件中使用一个标志，并在文档的keypress 事件中对其进行检查。
在您的HTML 中使用id=b erriesContent 而不是id="berriesContent"。

看看下面的 sn-p 看看它是如何工作的。

片段：

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

更新：

^{（回复this comment）}

为了能够对许多按钮-内容框对使用相同的功能，您必须更改整个代码：

您需要使用class，而不是所有按钮共享的id，以及所有内容框共享的id。
您需要遍历每个按钮以附加 click、mouseover 和 mouseout 事件的事件处理程序。
您必须更改标志的功能，而不仅仅是 true 或 false，才能真正缓存悬停的按钮。

查看下面的 sn-p 看看代码。

片段：

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

【讨论】：

当我尝试添加第二张带标题的照片时，我按照代码操作，第二个框不会像第一个那样打开。我该如何解决这个问题？
您将不得不更改您的整个代码才能实现这一目标。查看我的编辑@Teenbookhoarder。