温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - Eloquent JavaScript chapter 15 balloon exercise

html - 出色的JavaScript第15章气球练习

发布于 2020-03-31 23:14:05

在“ Eloquent Javascript”的第15章中,必须创建一个表情符号气球,用户可以通过按向上箭头将其扩展10%。另一方面,一旦用户按下箭头,它就会缩小10%。在某一点之后,气球爆炸(对我而言,一旦尺寸> 70,气球就会爆炸)。如果我想创建一个重置按钮,将气球爆炸后将其设置为其初始大小该怎么办。您将如何进行?这是我的尝试:

let p = document.querySelector("p");
let size;

function setSize(newSize) {
  size = newSize;
  p.style.fontSize = size + "px";
}
setSize(20);

function handleArrow(event) {
  if (event.key == "ArrowUp") {
    if (size > 70) {
      p.textContent = "????";
      document.body.removeEventListener("keydown", handleArrow);
    } else {
      setSize(size * 1.1);
      event.preventDefault();
    }
  } else if (event.key == "ArrowDown") {
    setSize(size * 0.9);
    event.preventDefault();
  }

}

function reset() {
  document.getElementById("myBtn").style.fontSize = "20px";
  let p = document.querySelector("myBtn");
}
document.body.addEventListener("keydown", handleArrow);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Balloon</title>

</head>

<body>
  <p id="myBtn">????</p>

  <button onclick="reset()">Reset</button>
</body>
<script src="balloon.js"></script>

</html>

此时,“ myBtn”仅重置气球,而不会将爆炸更改回气球表情符号。抱歉,很长的信息,谢谢您的关注。

查看更多

提问者
Aftersun Lotion
被浏览
20
Augusto Moura 2020-01-31 20:37

好吧,reset()将字体大小更改回20px,但除此之外,还必须再次做两件事:

  • 将文本内容更改#mybtn回????
  • 再次添加keydown侦听器

因此,该reset()方法将如下所示:

function reset() {
    var btn = document.getElementById("myBtn");
    btn.textContent = "????"
    btn.style.fontSize = "20px";
    document.body.addEventListener("keydown", handleArrow);
}