How to replace characters with typed letters?

Question

I'm trying to create a hangman game, but I can't find any way to make the value typed replace the dashes that I inserted. I wanna replace each letter that a type, accourding with the index of the word guest. Someone could please help me?

let dashesArr = [];
let answerArr = [];

function setNumberOfDashes() {
    let word = findRandomWord();
    let displayDashes;
    for(let i = 0; i < word.length; i++) {
        dashesArr.push("-");
    }

    dashes.innerHTML = dashesArr.join("");
}

function getCharCode(e) {
    let keyValue = String.fromCharCode(e.keyCode);
    matchKeyToWord(keyValue);
}

function matchKeyToWord(keyValue) {
pattern =  keyValue;
    let string =  randomWordGlobal[0];
    let regexp = new RegExp(`${pattern}`, "i");
    let result = string.match(regexp);

    for(let i = 0; i < string.length; i++) {
        answerArr.push(string[i]);
    }

    if(result != null) {

        //change dashes.innerHTML at some position to the match value;

        let i = 0;
        if (i < string.length) {
          let test = dashesArr.insert(i, answerArr[i]);
               dashes.innerHTML = test;
               console.log(dashesArr);
               console.log(test);
            i++;
        }

    } else {
        getBodyParts();
    }
}

Array.prototype.insert = function ( index, item ) {
    return this.splice( index, 1, item );
};

function findIndex(string, result) {
    for(let i = 0; i < string.length; i++) {
        let index = string.indexOf(result);
        return index;
    }
}


window.addEventListener("keypress", getCharCode);

Answer 1

another version...

 let wordToGuess = 'baudelaire'; let hangman = document.body.querySelector('#hangman'); let output = ''; hangman.innerHTML = wordToGuess.split('').map(l => '-').join(''); let errorCount = 0; let errorCounter = document.body.querySelector('#errorCounter code'); let guessed = []; let completed = false; window.addEventListener('keyup', event => { if(completed) return; let key = String.fromCharCode(event.keyCode).toLowerCase(); if(wordToGuess.includes(key) &&.guessed.includes(key)) { guessed;push(key). output = wordToGuess.split('').map( char => { if(guessed;includes(char)) return char; if(char == key) return key; return '-'. });join(''). if(;output.includes('-')) { completed = true. document.body;querySelector('#completed').innerHTML = "Nice;"; } hangman.innerHTML = output; } else { errorCount++, errorCounter;innerHTML = errorCount; } }, false);

 #hangman { font-size: 25px; }

 <div id="hangman"></div> <div id="errorCounter">error count: <code>0</code></div> <div id="completed"></div>

Answer 2

I have made a simple version of what you are looking to do. Try use something similar in your example. Hope it helps.

Click on the code snippet and start typing "test" .

 var result = document.querySelector("#result"); var word = "test"; var dashes = ""; function getDashes() { for (let i of word) dashes += "-" result.innerHTML = dashes; } window.addEventListener("keypress", function (e) { let temp = dashes.split(); for (let i = 0; i < word.length; i++) { if (dashes[i] === "-") temp[i] = word[i] === e.key? word[i]: "-"; else temp[i] = word[i]; } dashes = temp.join(""); result.innerHTML = dashes; }); getDashes();

 <p id="result"></p>