时间戳

首页 > 解决方案 > 无法弄清楚为什么我的文字没有变成绿色

javascript - 无法弄清楚为什么我的文字没有变成绿色

问题描述

首先，这是我的代码。

    var p1 = document.querySelector(".playerOne");
    var p2 = document.querySelector(".playerTwo");
    var p1Display = document.querySelector("#p1Span");
    var p2Display = document.querySelector("#p2Span");
    var header = document.querySelector("h1");
    var reset = document.querySelector(".reset");
    //var input = document.getElementsByTagName("input");
    var until = document.getElementsByClassName(".until");
    var p1Score = 0;
    var p2Score = 0;
    var gameOver = false;
    var max = 5;
    
    p1.addEventListener("click", function() {
        if (!gameOver) {
            p1Score++;
            p1Display.textContent = p1Score;
            header.textContent = (p1Score + " to " + p2Score);
        } 
        if (p1Score === max) {
            p1Display.classList.add("winner");
            gameOver = true;
        }
    });
    p2.addEventListener("click", function() {
        if (!gameOver) {
            p2Score++;
            p2Display.textContent = p2Score;
            header.textContent = (p1Score + " to " + p2Score);
        } 
        if (p2Score === max) {
            p2Display.classList.add("winner");
            gameOver = true;
        }
    });
    reset.addEventListener("click", function() {
        gameOver = false;
        p1Score = 0;
        p2Score = 0;
        p1Display.classList.remove("winner");
        p2Display.classList.remove("winner");
        header.textContent = (p1Score + " to " + p2Score);
    });
    .winner {
        color: green;
    }
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>JS practice 2</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1><span id="p1Span">0</span> to <span id="p2Span">0</span></h1>
        <p class="until">Playing to: </p>
        <input type="number">
        <button class="playerOne">Player One</button>
        <button class="playerTwo">Player Two</button>
        <button class="reset">Reset</button>
        <script type="text/javascript" src="main.js"></script>
        
    </body>
    </html>

所以，如您所见，我的 p1Display 和 p2Display 应该变成绿色。问题是，他们不这样做，而他们以 5 分的成绩挑选班级冠军。为什么它没有变成绿色，而它有把它变成绿色的类？

标签： javascripthtmlcss

解决方案

您正在span通过更改h1每次的内容来擦除 。无需这样做，因为您已经在更改span. 所以你必须删除这个：

header.textContent = (p1Score + " to " + p2Score);

var p1 = document.querySelector(".playerOne");
var p2 = document.querySelector(".playerTwo");
var p1Display = document.querySelector("#p1Span");
var p2Display = document.querySelector("#p2Span");
var header = document.querySelector("h1");
var reset = document.querySelector(".reset");
//var input = document.getElementsByTagName("input");
var until = document.getElementsByClassName(".until");
var p1Score = 0;
var p2Score = 0;
var gameOver = false;
var max = 5;

p1.addEventListener("click", function() {
  if (!gameOver) {
    p1Score++;
    p1Display.textContent = p1Score;
  }
  if (p1Score === max) {
    p1Display.classList.add("winner");
    gameOver = true;
  }
});
p2.addEventListener("click", function() {
  if (!gameOver) {
    p2Score++;
    p2Display.textContent = p2Score;
  }
  if (p2Score === max) {
    p2Display.classList.add("winner");
    gameOver = true;
  }
});
reset.addEventListener("click", function() {
  gameOver = false;
  p1Score = 0;
  p2Score = 0;
  p1Display.classList.remove("winner");
  p2Display.classList.remove("winner");
});
.winner {
  color: green;
}
<h1><span id="p1Span">0</span> to <span id="p2Span">0</span></h1>
<p class="until">Playing to: </p>
<input type="number">
<button class="playerOne">Player One</button>
<button class="playerTwo">Player Two</button>
<button class="reset">Reset</button>

推荐阅读