JavaScript Палач, поместите Письма

Question

так что я зашёл довольно далеко в своей игре «Палач», но, видимо, застрял с размещением букв при нажатии на письмо. Я сделал 2 переменные, одна из которых «слово», которое сохраняет слово, которое должно быть угадано. А другой - это «скрытое слово», длина которого в основном равна «слову», но буквы заменены подчеркиванием, как вы можете видеть здесь:

function checkLetter(buchstabe) {
    if(word.includes(buchstabe)) {
        hiddenWord = hiddenWord.replace(/_/g, buchstabe);
        console.log("right");
        document.getElementById("response").innerHTML = "Great guess!";
    }
    else {
        console.log("wrong")
        lives = lives -1;
        document.getElementById("response").innerHTML = "Sorry, the letter you chose is not part of the hidden word.";
    }
}

Теперь мои 2 переменные, о которых я говорил вам:

let word = "hallo123";//I set the variable to something random, because it randomly changes on start
let lives = 8; //Ignore this one, its just how many tries the user has left.
let hiddenWord;//and I didnt declare this one yet, because it will be only underscores

Пример того, как выглядит мой палач

Так что мой план таков, если кто-то нажимает на букву (здесь пример моих интерактивных букв, также называемых divs) и егофактически часть слова, она заменит конкретное подчеркивание этой буквой.

<div class="layout" onclick="checkLetter('a');">a</div>
    <div class="layout" onclick="checkLetter('b');">b</div>
    <div class="layout" onclick="checkLetter('c');">c</div>
    <div class="layout" onclick="checkLetter('d');">d</div>
    <div class="layout" onclick="checkLetter('e');">e</div>
    <div class="layout" onclick="checkLetter('b');">b</div>
    <div class="layout" onclick="checkLetter('c');">c</div>
    <div class="layout" onclick="checkLetter('d');">d</div>
    <div class="layout" onclick="checkLetter('e');">e</div>

Answer 1

Хорошо! Поэтому, посмотрев на ваш PasteBin, я вижу, что выглядит как div #wordToGuess внизу размещенного вами изображения - div, содержащий x количество подчеркиваний с предшествующим пробелом («_») в зависимости от длины слова пользователянужно угадать.

Когда функция checkLetter(buchstabe) срабатывает и соответствует условию if(word.includes(buchstabe)), почему бы вам не выполнить:

// HTML

<div id="wordToGuess"> _ _ _</div>

// JS

var buchstabe = 'a';
var currentHiddenWord = document.getElementById('wordToGuess').textContent;
var newHiddenWord = currentHiddenWord.replace(' _', buchstabe);
document.getElementById('wordToGuess').textContent = newHiddenWord;

Таким образом, ваша функция стала бы:

function checkLetter(buchstabe) {
    if(word.includes(buchstabe)) {
        hiddenWord = hiddenWord.replace(/_/g, buchstabe);
        console.log("right");
        document.getElementById("response").innerHTML = "Great guess!";
        // Update underscores
        var currentHiddenWord = document.getElementById('wordToGuess').textContent;
        var newHiddenWord = currentHiddenWord.replace(' _', buchstabe);
        document.getElementById('wordToGuess').textContent = newHiddenWord;
    }
    else {
        console.log("wrong")
        lives = lives -1;
        document.getElementById("response").innerHTML = "Sorry, the letter you chose is not part of the hidden word.";
    }
}

Код, после успешного угадывания, теперь устанавливает текущий текст из div WordToGuess как переменную с именем currentHiddenWord, заменяетпервый экземпляр «_» с правильно угаданной буквой (buchstabe) и устанавливает его как переменную с именем newHiddenWord, а затем заменяет текст внутри wordToGuess div значением переменной newHiddenWord.

Достигает ли это того, что вынеобходимость?