如何在满足条件时显示按钮/容器DOM操作

Question

pScore = 0; 
cScore = 0;
tie = 0; 
//UI. When play is clicked make R.P.S buttons appear
const startGame= () => {
intro = document.querySelector('.intro');
playBtn = document.querySelector(".playBtn");
match = document.querySelector('.match');
playBtn.addEventListener('click', e => {
match.classList.add("fadeIn");
playBtn.remove();
});
}

//When "rock", "paper", or "scissors" is clicked generate random
//option for computer selection then compare to see who wins
const playGame= () => {
button = document.querySelectorAll('.buttons button');
choices= ["rock", "paper", "scissors"];
choiceDisplay = document.querySelector('.matchContainer');
playerDisplay = document.querySelector('.playerDisplay');
button.forEach(button => {
button.addEventListener('click', function(e) {
//generate random computerSelection
computerSelection = choices[ Math.floor((Math.random() *choices.length))];

//display computer and player selection on UI
playerSelection = this.textContent;
playerDisplay.textContent = " "+ ` Player: ${playerSelection}`;
choiceDisplay.textContent = ` Computer: ${computerSelection } ` + " ";         

compareSelection(playerSelection, computerSelection);
});
}); 
}    
const compareSelection = ( playerSelection, computerSelection) => {
//compare player and computer choice
if (playerSelection === computerSelection){ console.log("tie");
tie++;
game();
return;
} else if ( playerSelection === "rock" && computerSelection === "scissors" ||
playerSelection === "scissors" && computerSelection === "paper" ||
playerSelection === "paper" && computerSelection === "rock" ){ 
console.log  (`You win! ${playerSelection} beats ${computerSelection}`);
pScore++;
game();
return;  
} else {
console.log(`You lose! ${computerSelection} beats ${playerSelection}`); 
cScore++;
game();
return; 
}

}   
const game = () => {
playerScore = document.querySelector('.playerScore');
computerScore = document.querySelector('.computerScore');
tieScore = document.querySelector('.tieScore');
resetBtn = document.querySelector('.resetBtn');
rpsBtns = document.querySelector('.buttons');
displayHolder = document.querySelector('.displayHolder');
theWinner = document.querySelector('.theWinner');
winSection = document.querySelector('.winSection');
resetContainer = document.querySelector('.resetContainer');
playerScore.textContent = pScore; 
computerScore.textContent = cScore;
tieScore.textContent = tie; 
count= pScore +cScore +tie; 

if(count === 5){
//disable R.P.S buttons and make 'reset' button clickable. Present winner add trophy img
rpsBtns.style.display = 'none';
displayHolder.style.display = 'none';


if( pScore > cScore && pScore > tie ){
//add .winSection to display winner
theWinner.textContent = ("player");
}
else if( cScore > pScore && cScore > tie){
//add .winSection to display winner
theWinner.textContent = ("computer");
}
else {
//add .winSection to display winner
winSection.style.display = 'none';

} 
//Add reset Button
resetBtn.classList.add = 'fadeIn';

}
}
startGame();
playGame();

body{
background-color: #844141;
}
.intro, .buttons{
text-align: center;
}
div.fadeOut{
opacity: 0;

}
div.fadeIn, .resetBtn.fadeIn{
opacity: 3;
}
.match, .resetBtn{
opacity: 0%;
transition: .5s ease;
}
.score-list, .score-list2, .winSection, .resetContainer{
font-size: 20px;        
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.computerTitle, .playerTitle, .tieTitle, .winnerTitle{
margin: 10px;
font-size: 30px;
}
.winnerTitle{
font-size: 40px;
}
.playBtn, .resetBtn{
font-size: 70px;
font-family: "Time New Roman", times, serif;
background-color: #4c586b;
border-radius: 5px;
padding: 12px; 
transition-duration: 1s; 

}

/* .reset{
font-size: 70px;
font-family: "Time New Roman", times, serif;
background-color: #4c586b;
border-radius: 5px;
padding: 12px; 
transition-duration: 1s; 
opacity: 10;
} */
.matchContainer, .playerDisplay{
display: flex;
align-items: center;
justify-content: center;
margin: 15px

}
.displayHolder{
display: flex;
justify-content: center;
}
.rockBtn, .paperBtn, .scissorsBtn{
font-size: 50px;
background-color:#555d5f;
margin: 15px;
border-radius: 5px;
font-family: "Time New Roman", times, serif;

}
.rockBtn:hover, .paperBtn:hover, .scissorsBtn:hover, .playBtn:hover, .resetBtn:hover{
background-color: #3c3e3f;
transition: .7s;
}
.title{
font-size: 45px;
}
.titleStatement{
font-size: 30px;
}
span{
font-size: 25px;
}
.theWinner{
font-size: 53px;
margin: 13px; 
}
.winSection{
opacity: 0%;
transition: 1s;
}

img{
margin: 10px;
width: 45px;
height: 50px;

}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="style.css">
<script src="rps.js" defer="defer"></script>
</head>
<body>
<div id="container">
<div class="intro">
<h1 class="title">Rock Paper Scissors</h1>
<h2 class="titleStatement">Challenge the computer five rounds of R.P.S to see who wins!</h2>
<!--once this is pressed the screen will transition to everything below -->
<button class="playBtn">Play!!</button> 
</div>  
<div class="match">

<div class="buttons">
<button class="rockBtn">rock</button>
<button class="paperBtn">paper</button>
<button class="scissorsBtn">scissors</button>
</div>
<div class="displayHolder">
<div class="playerDisplay"></div>
<div class="matchContainer"></div>

</div>
<div class="score-list">
<p class="playerTitle">Player Score: </p>
<span class="playerScore">0</span>
<p class="computerTitle">Computer Score:</p>
<span class="computerScore">0</span>

</div>    
<div class="score-list2">
<p class="tieTitle">Tie: </p>
<span class="tieScore">0</span>
</div>

<div class="winSection">
<h3 class="winnerTitle">Winner: </h3>
<span class="theWinner">?</span>
<img src="/trophy.png" alt="trophy image">
</div>
<div class="resetContainer">
<button class="resetBtn">Play Again!</button>
</div>
</div>
</div>
</body>
</html>

我正在完成我的R.P.S项目的触摸，我找不到合适的风格来让我的resetBtn在函数game()中显示，当条件"count===5"是满足。当count === 5满足条件时，我还想要一些帮助来显示。winsection。我不知道我是怎么做的。intro部分，使播放按钮消失，并在lol后出现重置

我尝试添加重置按钮，就像我做了第一部分(点击playbtn后)使用resetBtn.classList.add = 'fadeIn';但这行不通。我弄乱了css的不透明度，也许我在。css文件中交叉了一些相同的代码。在花了一些时间之后，我意识到我应该寻求帮助。提前感谢您的帮助!

Answer 1

添加类的js函数是element.classList.add('my-class')而不是.add = "my-class"。这就解决了按钮问题。你必须为该按钮注册一个事件，否则游戏将无法重新开始。

其他事情:

• 不透明度是0和1之间的值或0%和100%(你有opacity: 3)
• 默认的按钮类型是submit，但是你没有提交任何东西，所以将类型设置为按钮<button type="button">
• 缩进是一个烂摊子(但我猜这是由于复制粘贴)
• 不要.remove()你的playBtn，我猜你将需要它重新启动?或者如果你在点击重启按钮后直接切换到游戏，那么你可以这样做。

pScore = 0; 
cScore = 0;
tie = 0; 
//UI. When play is clicked make R.P.S buttons appear
const startGame= () => {
intro = document.querySelector('.intro');
playBtn = document.querySelector(".playBtn");
match = document.querySelector('.match');
playBtn.addEventListener('click', e => {
match.classList.add("fadeIn");
playBtn.style.display = 'none';
});
}

//When "rock", "paper", or "scissors" is clicked generate random
//option for computer selection then compare to see who wins
const playGame= () => {
button = document.querySelectorAll('.buttons button');
choices= ["rock", "paper", "scissors"];
choiceDisplay = document.querySelector('.matchContainer');
playerDisplay = document.querySelector('.playerDisplay');
button.forEach(button => {
button.addEventListener('click', function(e) {
//generate random computerSelection
computerSelection = choices[ Math.floor((Math.random() *choices.length))];

//display computer and player selection on UI
playerSelection = this.textContent;
playerDisplay.textContent = " "+ ` Player: ${playerSelection}`;
choiceDisplay.textContent = ` Computer: ${computerSelection } ` + " ";         

compareSelection(playerSelection, computerSelection);
});
}); 
}    
const compareSelection = ( playerSelection, computerSelection) => {
//compare player and computer choice
if (playerSelection === computerSelection){ console.log("tie");
tie++;
game();
return;
} else if ( playerSelection === "rock" && computerSelection === "scissors" ||
playerSelection === "scissors" && computerSelection === "paper" ||
playerSelection === "paper" && computerSelection === "rock" ){ 
console.log  (`You win! ${playerSelection} beats ${computerSelection}`);
pScore++;
game();
return;  
} else {
console.log(`You lose! ${computerSelection} beats ${playerSelection}`); 
cScore++;
game();
return; 
}

}   
const game = () => {
playerScore = document.querySelector('.playerScore');
computerScore = document.querySelector('.computerScore');
tieScore = document.querySelector('.tieScore');
resetBtn = document.querySelector('.resetBtn');
rpsBtns = document.querySelector('.buttons');
displayHolder = document.querySelector('.displayHolder');
theWinner = document.querySelector('.theWinner');
winSection = document.querySelector('.winSection');
resetContainer = document.querySelector('.resetContainer');
playerScore.textContent = pScore; 
computerScore.textContent = cScore;
tieScore.textContent = tie; 
count= pScore +cScore +tie; 

if(count === 5){
//disable R.P.S buttons and make 'reset' button clickable. Present winner add trophy img
rpsBtns.style.display = 'none';
displayHolder.style.display = 'none';


if( pScore > cScore && pScore > tie ){
//add .winSection to display winner
theWinner.textContent = ("player");
}
else if( cScore > pScore && cScore > tie){
//add .winSection to display winner
theWinner.textContent = ("computer");
}
else {
//add .winSection to display winner
winSection.style.display = 'none';

} 
//Add reset Button
resetBtn.classList.add('fadeIn');
// click handler missing to restart game
}
}
startGame();
playGame();

body{
background-color: #844141;
}
.intro, .buttons{
text-align: center;
}
div.fadeOut{
opacity: 0;

}
div.fadeIn, .resetBtn.fadeIn{
opacity: 1;
}
.match, .resetBtn{
opacity: 0%;
transition: .5s ease;
}
.score-list, .score-list2, .winSection, .resetContainer{
font-size: 20px;        
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.computerTitle, .playerTitle, .tieTitle, .winnerTitle{
margin: 10px;
font-size: 30px;
}
.winnerTitle{
font-size: 40px;
}
.playBtn, .resetBtn{
font-size: 70px;
font-family: "Time New Roman", times, serif;
background-color: #4c586b;
border-radius: 5px;
padding: 12px; 
transition-duration: 1s; 

}

/* .reset{
font-size: 70px;
font-family: "Time New Roman", times, serif;
background-color: #4c586b;
border-radius: 5px;
padding: 12px; 
transition-duration: 1s; 
opacity: 10;
} */
.matchContainer, .playerDisplay{
display: flex;
align-items: center;
justify-content: center;
margin: 15px

}
.displayHolder{
display: flex;
justify-content: center;
}
.rockBtn, .paperBtn, .scissorsBtn{
font-size: 50px;
background-color:#555d5f;
margin: 15px;
border-radius: 5px;
font-family: "Time New Roman", times, serif;

}
.rockBtn:hover, .paperBtn:hover, .scissorsBtn:hover, .playBtn:hover, .resetBtn:hover{
background-color: #3c3e3f;
transition: .7s;
}
.title{
font-size: 45px;
}
.titleStatement{
font-size: 30px;
}
span{
font-size: 25px;
}
.theWinner{
font-size: 53px;
margin: 13px; 
}
.winSection{
opacity: 0%;
transition: 1s;
}

img{
margin: 10px;
width: 45px;
height: 50px;

}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="style.css">
<script src="rps.js" defer="defer"></script>
</head>
<body>
<div id="container">
<div class="intro">
<h1 class="title">Rock Paper Scissors</h1>
<h2 class="titleStatement">Challenge the computer five rounds of R.P.S to see who wins!</h2>
<!--once this is pressed the screen will transition to everything below -->
<button type="button" class="playBtn">Play!!</button> 
</div>  
<div class="match">

<div class="buttons">
<button class="rockBtn">rock</button>
<button class="paperBtn">paper</button>
<button class="scissorsBtn">scissors</button>
</div>
<div class="displayHolder">
<div class="playerDisplay"></div>
<div class="matchContainer"></div>
</div>
<div class="score-list">
<p class="playerTitle">Player Score: </p>
<span class="playerScore">0</span>
<p class="computerTitle">Computer Score:</p>
<span class="computerScore">0</span>

</div>    
<div class="score-list2">
<p class="tieTitle">Tie: </p>
<span class="tieScore">0</span>
</div>

<div class="winSection">
<h3 class="winnerTitle">Winner: </h3>
<span class="theWinner">?</span>
<img src="/trophy.png" alt="trophy image">
</div>
<div class="resetContainer">
<button type="button" class="resetBtn">Play Again!</button>
</div>
</div>
</div>
</body>
</html>