时间戳

首页 > 解决方案 > Eloquent JavaScript 第 15 章气球练习

javascript - Eloquent JavaScript 第 15 章气球练习

问题描述

在“Eloquent Javascript”的第 15 章中，必须创建一个 emoji 气球，用户可以通过按向上箭头来扩大 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”只会重置气球，但不会将爆炸改回气球表情符号。对不起，很长的信息，感谢您的关注。

标签： javascripthtmleloquentdom-eventsevent-listener

解决方案

好吧，在reset()你将字体大小改回 20px 时，但除此之外还有两件事必须再次完成：

  • #mybtn将back的文本内容更改为
  • 再次添加 keydown 监听器

因此，该reset()方法将变为如下：

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

推荐阅读