伙计们。我对JS还很陌生，我已经有很长一段时间遇到了一个问题。我的代码是一个简单的骰子游戏。当你按下一个按钮时，你会调用一个JS函数，该函数将12个骰子图像随机化，并根据骰子值显示某些图像和获胜者的标题。
问题是，我使用DOM从HTML元素中添加和删除一个类，以通过CSS控制元素的可见性。有两个循环到"；"干净"；我以前跑步的元素。第一个似乎有效(arrayImagesClasses(，第二个在控制台上出现错误(arrayTitleClasses(。
我的疑虑是：
- 为什么我的第二个循环不起作用
- 这是正确的操作方式吗？(我的解决方案看起来很"愚蠢"(
提前感谢。
''
function getRandomDiceNumber(){
return Math.ceil(Math.random() * 6)
}
function pickWinner() {
// Remove visibility class from all dice images in previous runs
var arrayImagesClasses = document.querySelectorAll("[class*='-img']");
for ( i = 0; i <= 11; i++ ) {
arrayImagesClasses[i].classList.remove("dice-img-visibility");
}
//Remove visibility class from titles
var arrayTitleClasses = document.querySelectorAll("[class*='-title']");
for ( j = 0; j <= 11; j++ ) {
arrayTitleClasses[j].classList.remove("pick-winner");
}
// get random dice (1 - 6) number
var randomNumberPlayerOne = getRandomDiceNumber();
var randomNumberPlayerTwo = getRandomDiceNumber();
// use same dice function to access index of dice imgages array
var diceImgPlayerOne = document.querySelector(".p1-dice"+ randomNumberPlayerOne + "-img");
var diceImgPlayerTwo = document.querySelector(".p2-dice"+ randomNumberPlayerTwo + "-img");
if (randomNumberPlayerOne > randomNumberPlayerTwo) {
document.querySelector(".p1-win-title").classList.toggle("pick-winner");
diceImgPlayerOne.classList.toggle("dice-img-visibility");
diceImgPlayerTwo.classList.toggle("dice-img-visibility");
} else if (randomNumberPlayerOne < randomNumberPlayerTwo) {
document.querySelector(".p2-win-title").classList.toggle("pick-winner");
diceImgPlayerOne.classList.toggle("dice-img-visibility");
diceImgPlayerTwo.classList.toggle("dice-img-visibility");
} else {
document.querySelector(".tie-title").classList.toggle("pick-winner");
diceImgPlayerOne.classList.toggle("dice-img-visibility");
diceImgPlayerTwo.classList.toggle("dice-img-visibility");
}
}body {
text-align: center;
font-family: 'Montserrat', sans-serif;
background-color: #495371;
color: #EEEEEE;
}
img {
width: 290px;
height: auto;
visibility: visible;
/* position: absolute; */
margin: auto;
}
h1 {
font-size: 5rem;
}
/* Titles */
.p1-win-title {
display: none;
}
.p2-win-title {
display: none;
}
.tie-title {
display: none;
}
.pick-winner {
/* display: visible; */
display: block;
}
/* Players Dice */
.player1-div {
display: inline-block;
width: 400px;
height: 400px;
}
.player2-div {
display: inline-block;
width: 400px;
height: 400px;
}
.header-p1, .header-p2 {
font-size: 2rem;
font-weight: 400;
}
.dice-p1-div {
position: relative;
}
.dice-p2-div {
position: relative;
}
.p1-dice1-img, .p1-dice2-img,
.p1-dice3-img, .p1-dice4-img,
.p1-dice5-img, .p1-dice6-img {
position: absolute;
left: 60px;
display: none;
}
.p2-dice1-img, .p2-dice2-img,
.p2-dice3-img, .p2-dice4-img,
.p2-dice5-img, .p2-dice6-img {
position: absolute;
left: 60px;
display: none;
}
.dice-img-visibility {
display: inline;
}
.button-div{
margin: 3% auto;
}
.button-roll {
height: 70px;
width: 200px;
border-radius: 10px;
border: 0;
font-size: 1.8Rem;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
}
.footer {
bottom: 0;
position: static;
width: 100%;
/* margin: 2% auto; */
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="css/styles.css">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Roboto&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<!-- Title and winner -->
<div class="">
<h1 class="main-title">Dice Game</h1>
<h1 class="p1-win-title">Player 1 Wins!</h1>
<h1 class="p2-win-title">Player 2 Wins!</h1>
<h1 class="tie-title">It's a tie!</h1>
</div>
<!-- Dice header -->
<div class="game-area">
<div class="player1-div">
<div class="player1-div-header">
<h3 class="header-p1">Player 1</h3>
</div>
<div class="dice-p1-div">
<img class="p1-dice1-img" src="images/dice1.png" alt="">
<img class="p1-dice2-img" src="images/dice2.png" alt="">
<img class="p1-dice3-img" src="images/dice3.png" alt="">
<img class="p1-dice4-img" src="images/dice4.png" alt="">
<img class="p1-dice5-img" src="images/dice5.png" alt="">
<img class="p1-dice6-img" src="images/dice6.png" alt="">
</div>
</div>
<div class="player2-div">
<div class="player2-div-header">
<h3 class="header-p2">Player 2</h3>
</div>
<div class="dice-p2-div">
<img class="p2-dice1-img" src="images/dice1.png" alt="">
<img class="p2-dice2-img" src="images/dice2.png" alt="">
<img class="p2-dice3-img" src="images/dice3.png" alt="">
<img class="p2-dice4-img" src="images/dice4.png" alt="">
<img class="p2-dice5-img" src="images/dice5.png" alt="">
<img class="p2-dice6-img" src="images/dice6.png" alt="">
</div>
</div>
</div>
<!-- Buttton -->
<div class="button-div">
<button class="button-roll" onclick="pickWinner();" type="button" name="button">Roll</button>
</div>
<!-- Footer -->
<div class="footer">
<p>Dice Game</p>
<p>Alexandre Luiz Elias</p>
</div>
<script src="js/index.js" charset="utf-8"></script>
</body>
</html>''
您不能确定数组的长度总是11。请尝试下面的代码；
//Remove visibility class from titles
var arrayTitleClasses = Array.from(document.querySelectorAll("[class*='-title']"));
for ( j = 0; j <= arrayTitleClasses.length; j++ ) {
arrayTitleClasses[j].classList.remove("pick-winner");
}
之所以会发生这种情况，是因为当您获取带有var arrayTitleClasses = document.querySelectorAll("[class*='-title']");的arrayTitleClasses并在其上循环时。此数组只有4个元素长，您要在其中循环11次。