javascript - 单击“再次”后，JavaScript WebApp 失去形状

问题描述

我正在制作一个小游戏来猜测 javascript 中的数字，但是当我尝试重置游戏时，通过单击添加 addEventListener 并单击创建的名为“Again”的按钮以重置为原始配置并重置游戏 web-应用程序变形。为什么会这样？？

我的 HTML 代码是：

var number = Math.trunc(Math.random() * 20) + 1;
var score = 20;
var highscore = 0;


document.querySelector(".check").addEventListener("click", function() {
      var guess = Number(document.querySelector(".guess").value);
      console.log(guess);

// when there is no input
      if (!guess) {
        document.querySelector(".message").
        textContent = "No Number!!!!!!";

// when player wins
      } else if (guess === number) {
        document.querySelector(".message").
        textContent = "Correct Number!!!!!!!!";
        document.querySelector(".number").textContent = number;
        document.querySelector("body").style.backgroundColor="#60b347";
        document.querySelector(".number").style.width="30rem";

        if(score>highscore){
          highscore=score;
          document.querySelector(".highscore").textContent=highscore;
        }

// when guess is too high
      } else if (guess > number) {
        if (score > 1) {
          document.querySelector(".message").
          textContent = "Too High!!!!!!!!!!";
          score = score - 1;
          document.querySelector(".score").textContent = score;
        } else {
          document.querySelector(".message").textContent = "YOU LOST THE GAME";
          document.querySelector(".score").textContent=0;
        }

// when guess is to low
        } else if (guess < number) {
          if (score > 1) {
            document.querySelector(".message").
            textContent = "Too Low!!!!!!!!!!";
            score = score - 1;
            document.querySelector(".score").textContent = score;
          } else {
            document.querySelector(".message").textContent = "YOU LOST THE GAME";
            document.querySelector(".score").textContent=0;
          }
        }
      });

      document.querySelector(".again").addEventListener("click", function(){
        score=20;
        var number = Math.trunc(Math.random() * 20) + 1;
        document.querySelector(".message").textContent = "Start guessing...";
        document.querySelector(".score").textContent = score;
        document.querySelector(".number").textContent = "?";
        document.querySelector(".guess").value="";
        document.querySelector("body").style.backgroundColor="#222";
        document.querySelector("body").style.width="15rem";
  });

@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Press Start 2P', sans-serif;
  color: #eee;
  background-color: #222;
  /* background-color: #60b347; */
}

/* LAYOUT */
header {
  position: relative;
  height: 35vh;
  border-bottom: 7px solid #eee;
}

main {
  height: 65vh;
  color: #eee;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.left {
  width: 52rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.right {
  width: 52rem;
  font-size: 2rem;
}

/* ELEMENTS STYLE */
h1 {
  font-size: 4rem;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.number {
  background: #eee;
  color: #333;
  font-size: 6rem;
  width: 15rem;
  padding: 3rem 0rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.between {
  font-size: 1.4rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
}

.again {
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.guess {
  background: none;
  border: 4px solid #eee;
  font-family: inherit;
  color: inherit;
  font-size: 5rem;
  padding: 2.5rem;
  width: 25rem;
  text-align: center;
  display: block;
  margin-bottom: 3rem;
}

.btn {
  border: none;
  background-color: #eee;
  color: #222;
  font-size: 2rem;
  font-family: inherit;
  padding: 2rem 3rem;
  cursor: pointer;
}

.btn:hover {
  background-color: #ccc;
}

.message {
  margin-bottom: 8rem;
  height: 3rem;
}

.label-score {
  margin-bottom: 2rem;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Guess My Number!</title>
  </head>
  <body>
    <header>
      <h1>Guess My Number!</h1>
      <p class="between">(Between 1 and 20)</p>
      <button class="btn again">Again!</button>
      <div class="number">?</div>
    </header>
    <main>
      <section class="left">
        <input type="number" class="guess" />
        <button class="btn check">Check!</button>
      </section>
      <section class="right">
        <p class="message">Start guessing...</p>
        <p class="label-score">Score: <span class="score">20</span></p>
        <p class="label-highscore">
          Highscore: <span class="highscore">0</span>
        </p>
      </section>
    </main>
    <script src="script.js"></script>
  </body>
</html>

标签： javascripthtmlcss

javascript - 单击“再次”后，JavaScript WebApp 失去形状

问题描述

解决方案

推荐阅读