為什么我的劊子手 JavaScript 游戲中沒有顯示我的所有信件？

Question

這是我在這里的第一篇文章，如果格式不正確，請原諒我的格式。 我正在構建一個劊子手游戲，我正在用字母替換我的下划線，除非它是一個雙字母。

示例：奶酪僅返回 che _ s _

我在下面附上了我的代碼：

 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 並比較它們。 但是一旦它像雙“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!")
            }
        }
         
    })
}