为什么我所有的字母都没有出现在我的刽子手javascript游戏中？

Question

这是我在这里的第一篇文章，所以请原谅我的格式不正确。我正在构建一个绞刑游戏，我得到的字母来代替我的下划线，除非它是一个双字母。

示例:cheese只返回c

我把我的代码附在下面:

const inputButton = document.querySelector("#wordInput")
const startButton = document.querySelector(".startButton")
const guessHere = document.querySelector(".guess")
const letters = document.querySelector(".letters")
let empty = ""
const letterA = document.querySelector("#A")
const alphabet = document.querySelectorAll(".letter")
let inputVal = ''
console.log(inputVal)
const wrongLetters = document.querySelector(".wrongLetters")
let wrongCounter = [];
let winCount = 0;
console.log(`win count is ${winCount}` )
let loseCount = 0;
console.log(`lose count is ${loseCount}`)

//-------------START BUTTON----------------------------------------------//
startButton.addEventListener("click", ()=>{
inputVal = inputButton.value
let chars = inputVal.split("")
for(let i=0; i<chars.length;i++){
const hiddenLetter = document.createElement("span")
hiddenLetter.classList.add("input-letters")
hiddenLetter.id = i
hiddenLetter.innerText = "_"
hiddenLetter.style.marginRight = "15px"
// const hiddenChar = document.createElement("p")
// hiddenLetter.appendChild(hiddenChar)
// console.log(hiddenLetter)
// hiddenLetter.innerText = "_ "
letters.appendChild(hiddenLetter)
// hiddenLetter.style.height = "5px";
hiddenLetter.style.fontSize = "50px";

}
const startingMinutes = 2;
let time = startingMinutes * 60;
const countdownEl = document.querySelector("#countdown")
let refreshIntervalid=setInterval(updateCountdown, 1000);
let once = false;
function updateCountdown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10? "0" + seconds : seconds;
countdownEl.innerHTML = `${minutes}: ${seconds}`;
time--;
if (time < 0) { //stop the setInterval whe time = 0 for avoid negative time
alert("Game Over")
clearInterval(refreshIntervalid);
}
once = true;

}
})
const hiddenChar = document.createElement("span")
const revealLetter = (e) =>{
// inputVal = inputButton.value
// console.log(inputVal);
let chars = inputVal.split("")
// console.log(chars)
let guessedLetter = e.target.id.toLowerCase()
console.log(guessedLetter);
let index = chars.indexOf(guessedLetter)
if (chars.includes(guessedLetter)){
// console.log("Letter exists", guessedLetter);
// console.log(chars.indexOf(guessedLetter));
let underlines = document.querySelectorAll(".input-letters")
underlines.forEach(span =>{
// console.log("span id: ", typeof span.id);
// console.log("index: ", typeof index);
if(parseInt(span.id) === index){
console.log("Match!");
span.innerText = guessedLetter
winCount++
console.log(winCount)
e.target.remove()
if(winCount===chars.length){
alert("You won the Game!")
}

}

})
}else{
wrongCounter.push(guessedLetter)
wrongLetters.innerText = wrongCounter
loseCount+=1
console.log(loseCount)
e.target.remove()
if(loseCount>=5){
alert("Game Over!")
}

}
// for(let i = 0; i < chars.length; i++){
//         const hiddenChar = document.createElement("span")
//         console.log(hiddenChar)
//         hiddenChar.innerText = chars[i] + " "
//         letters.appendChild(hiddenChar)
//         hiddenChar.style.fontSize = "50px"
//         hiddenChar.style.visibility = "hidden"
//         // "visible"
//         // "hidden"
//         if (chars[i]==("")){
//             hiddenChar.style.visibility = "visible"
//         }
// }
}
alphabet.forEach(letter=>{
letter.addEventListener("click", revealLetter)
})

body{
background-color: #ffe4c4;
display:flex;
flex-direction: column;
flex-wrap: wrap;
}
.playerOne{
border-style: double;
border-width: 1em;
text-align: center;
height: 200px;
}
.wrongLettersBox{
border-style: double;
border-width: 1em;
width: 200px;
height: 300px;

text-align: center;


}
.container{
display: flex;
}
#wordInput{
/* transform: translate(574px, 43px); */
color: black;
text-transform: uppercase
}

.startButton{
/* transform: translate(572px, 43px); */
}
.enterWordHere{
/* transform: translate(588px, 31px); */
}
.guess{
text-align: center;
border-style: double;
border-width: 1em;
width: 828px;
height: 300px;
}
.image{
border-style: double;
border-width: 1em;
height: 300px;
width: 300px;
}
.alphabet{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.letter{
height: 50px;
width: 50px;
border-style: dashed;
text-align: center;
background-color: rgb(200, 149, 60);
color: rgb(242, 242, 242);
}
#countdown{
font-size: 20px;
color:red;
}

<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<div class="playerOne">
<h1 class="snowMan_Name">Snowman</h1>
<h3 class="enterWordHere">Enter your word here:</h3>
<input type="text" id="wordInput" name="wordInput">
<button class="startButton">Start</button>
<p id="countdown"></p>
</div>
<div class="container">
<div class="image">
<h3>Image goes here!</h3>
</div>
<div class="guess">
<h3>Guess Here!</h3>
<div class="letters"></div>

</div>
<body>
<div class="wrongLettersBox">
Wrong Letters
<div class="wrongLetters"></div>
</div>
</div>
<div class="alphabet">
<div class="letter" id="A">A</div>
<div class="letter" id="B">B</div>
<div class="letter" id="C">C</div>
<div class="letter" id="D">D</div>
<div class="letter" id="E">E</div>
<div class="letter" id="F">F</div>
<div class="letter" id="G">G</div>
<div class="letter" id="H">H</div>
<div class="letter" id="I">I</div>
<div class="letter" id="J">J</div>
<div class="letter" id="K">K</div>
<div class="letter" id="L">L</div>
<div class="letter" id="M">M</div>
<div class="letter" id="N">N</div>
<div class="letter" id="O">O</div>
<div class="letter" id="P">P</div>
<div class="letter" id="Q">Q</div>
<div class="letter" id="R">R</div>
<div class="letter" id="S">S</div>
<div class="letter" id="T">T</div>
<div class="letter" id="U">U</div>
<div class="letter" id="V">V</div>
<div class="letter" id="W">W</div>
<div class="letter" id="X">X</div>
<div class="letter" id="Y">Y</div>
<div class="letter" id="Z">Z</div>
</div>
<script src="script.js"></script>    
</body>
</html>

基本上，我认为发生的事情是计算机正在获取id并对它们进行比较。但是一旦它是一个重复的字母，比如double &; a &;它得到第一个字母A，然后跳过其余的。

Answer 1

let index = chars.indexOf(guessedLetter)

indexOf方法只获得它找到的第一个匹配项。

因为你已经在循环了，你不需要使用indexOf。检查chars[parseInt(span.id)] === guessedLetter

if (chars.includes(guessedLetter)){
let underlines = document.querySelectorAll(".input-letters")
underlines.forEach(span => {
if (chars[parseInt(span.id)] === guessedLetter) {
console.log("Match!");
span.innerText = guessedLetter
winCount++
console.log(winCount)
e.target.remove()
if(winCount===chars.length){
alert("You won the Game!")
}
}

})
}