В главе 15 «Eloquent Javascript» необходимо создать смайлик-шар, который пользователи могут расширить на 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» только сбрасывает баллон, но не изменяет взрыв обратно на эмодзи баллона. Извините за длинное сообщение и спасибо за ваше внимание.