Почему не все мои письма отображаются в моей javascript-игре "Виселица"?

Это мой первый пост здесь, так что извините за форматирование, если что-то не так. Я создаю игру палача, и я получаю буквы, чтобы заменить мои символы подчеркивания, ЕСЛИ это не двойная буква.

пример: cheese возвращает только c h e _ 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>

В основном я думаю, что происходит то, что компьютер получает идентификаторы и сравнивает их. Но как только это повторяющаяся буква, такая как двойная «А», она получает первую букву А и пропускает остальные.

Что происходит сейчас... Где это не работает в настоящее время? Если бы вы добавили HTML, это помогло бы.

Kinglish 17.05.2022 23:50

В вашем коде вообще нет подчеркивания. Откуда это взялось? А что вы подразумеваете под "сыр возвращает только ч е _ с _"? Что он должен вернуть? И что такое «это» в данном контексте?

jarmod 17.05.2022 23:51

Хорошо, я отредактирую мой код, чтобы вы могли видеть все, включая html, css и javascript.

John 17.05.2022 23:52
indexOf() возвращает индекс первое, по которому данный элемент можно найти в массиве. Таким образом, вы выводите все e в одном месте. Ваш код, скорее всего, подойдет для chart.
PM 77-1 17.05.2022 23:55

да, я думаю, что проблема в indexof(). Но что я могу изменить, чтобы решить эту проблему?

John 17.05.2022 23:59
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
5
37
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий
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!")
            }
        }
         
    })
}

Большое спасибо! теперь это работает!

John 18.05.2022 00:25

Это может быть не совсем полезно, но при реверс-инжиниринге я пошел немного другим путем. Я использую массив, чтобы содержать исходное слово, а также массив, который получает spliced по пути, когда вы получаете правильные буквы. Также я покажу, как можно использовать простые кнопки для букв без необходимости кодировать ID или другие атрибуты.

let word = "abba".split("")
let chars = [...word]
let underlines = document.querySelectorAll(".input-letters")
const revealLetter = (e) => {
  let guessedLetter = e.target.innerText.toLowerCase()
  let index = chars.indexOf(guessedLetter)
  if (index > -1) {
    chars.splice(index, 1);
    let found = false
    word.forEach((e, i) => {
      if (e === guessedLetter && underlines[i].innerText == "_" && !found) {
        found = true;
        underlines[i].innerText = e;
      }
    })
    if (chars.length == 0) console.log("You won the Game!")
  } else {
    console.log('wrong');
  }
}

document.querySelectorAll('.alphabet button').forEach(letter => {
  letter.addEventListener("click", revealLetter)
})
<div class='alphabet'>
  <button>a</button><button>b</button><button>c</button>
</div>

<div>
  <span class='input-letters'>_</span>
  <span class='input-letters'>_</span>
  <span class='input-letters'>_</span>
  <span class='input-letters'>_</span>
</div>

Другие вопросы по теме