JavaScript Hangman, place the Letters - replace

Question

so I have come quiet far in my Hangman Game, but apparently im stuck with placing the Letters when a letter gets clicked.
I made 2 Variables, one of them is "word" which saves the word that has to be guessed.
And the other one is "hiddenword" which is basically the same length as "word" but the letters are replaced with underscores as you can see here:
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.";
}
}
Now my 2 Variables I told you about:
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
Example of what my Hangman looks like
So my plan is, if someone clicks a letter (here a example of my clickable letters aka divs) and its actually part of the word, it will replace the specific underscore with that letter.
<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

Okay! So after looking at your PasteBin I can see it looks like the #wordToGuess div at the bottom of the image you posted is a div containing x amount of underscores with a preceding space (" _") depending on the length of the word the user needs to guess.
When the checkLetter(buchstabe) function is fired and meets the if(word.includes(buchstabe)) condition why don't you do:
// 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;
So your function would become:
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.";
}
}
The code, upon successful guess, now sets the current text from wordToGuess div as a variable called currentHiddenWord, replaces the first instance of " _" with the correctly guessed letter (buchstabe) and sets that as a variable called newHiddenWord, and then replaces the text inside the wordToGuess div the value of the newHiddenWord variable.
Does that achieve what you need?