伙計們。我對 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>'''
uj5u.com熱心網友回復：
你不能確定你的陣列的長度總是 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");
}
uj5u.com熱心網友回復：
發生這種情況是因為當您使用 arrayTitleClassesvar arrayTitleClasses = document.querySelectorAll("[class*='-title']");并對其進行回圈時。這個陣列只有 4 個元素長，你要回圈 11 次。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/433095.html
標籤：javascript html css dom
下一篇：我提交的表格沒有顯示在瀏覽器上