gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:20:05 26 4
gpt4 key购买 nike

首先,这是我的代码。

    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 分的成绩选出了类(class)冠军。为什么它没有变成绿色,而它有将它变成绿色的类?

最佳答案

您正在通过每次更改 h1 的内容来删除 span。不需要这样做,因为您已经在更改 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>

关于javascript - 无法弄清楚为什么我的文字没有变成绿色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51995135/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com