How to change the innerHTML of the char js

user_15248922 0
Viewed 90

I want to make a Hangman game so I can learn JavaScript, I don't know how to change the innerHTML of the char I made in js. So when I know if the string includes the guess then i want to make the line which represents the correct guess to transform into a charater and make it apear but when i run the code it turns the last of the lines into the correct guess and makes it disapear when there's a new guess and transforms the line into second correct guess. And doesn't reconizez 'o'(the last character that is in the string) I would like to apologize if I made grammer mistakes.

//defineing the word
var a = 'hello';
// makes the lines 
for ( var i=0; i<a.length; i++){
        var letter = document.createElement("h3");
        letter.className = 'letter'+i;
        var j = 2*i+23;
        letter.style ="position: absolute;"+"top: 14%;"+"left: "+j+"%;";
        letter.innerHTML = "_";
        document.body.appendChild(letter);
    }  

//submit btn gets the input and if it's correct shows it, if it isn't correct than puts into a wrong words
function submt(a,letter){
    var inpt = document.getElementById('input');
    if (a.includes(inpt.value)){
        letter.innerHTML = a[a.indexOf(inpt.value)]; 
    }else {
        console.log('wrong')
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hangman</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@500&display=swap" rel="stylesheet"> 
</head>
<body>
    <p class='letter'>Write the letter in here:</p>
    <p class='bad'> the wrong letters:</p>
    <p class='word'>the word:</p>
    <input type="text" class="input" id="input">
     <button class="sub" id='submit' onclick="submt(a,letter)">submit</button>
    <script src="script.js"></script>  
</body>
</html>

html javascript
2 Answers

You were resetting the letter variable to the last h3 element. You needed a array for each of the slots.

//defineing the word
    var a = 'hello';
    // makes the lines
    var letters = []; // this array store the h3 elements
    for ( var i=0; i<a.length; i++){
            var letter = document.createElement("h3");
            letter.className = 'letter'+i;
            var j = 2*i+23;
            letter.style ="position: absolute;"+"top: 14%;"+"left: "+j+"%;";
            letter.innerHTML = "_";
            document.body.appendChild(letter);
            letters.push(letter); // add element to array
        }  

    //submit btn gets the input and if it's correct shows it, if it isn't correct than puts into a wrong words
    function submt(a,letter){
        var inpt = document.getElementById('input');
        if (a.includes(inpt.value)){
            var l = 0, result = [];
            while (l<a.split('').length) {
              if (a.split('')[l] == inpt.value) { // a split('') turns the word into an array so it is easier to search
                result.push(l); // this store the position of the correct letter in the word
              }
              l++;
            }
            var l = 0;
            while (l<result.length) {
              letters[result[l]].innerHTML = a.split('')[result[l]]; // change the h3 elements content to the correct letter using the result array.
              l++;
            }
        }else {
            console.log('wrong')
        }
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Hangman</title>
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@500&display=swap" rel="stylesheet"> 
    </head>
    <body>
        <p class='letter'>Write the letter in here:</p>
        <p class='bad'> the wrong letters:</p>
        <p class='word'>the word:</p>
        <input type="text" class="input" id="input">
         <button class="sub" id='submit' onclick="submt(a,letter)">submit</button>
        <script src="script.js"></script>  
    </body>
    </html>

user_142386290

You are currently accessing always the last dash created. Thats because createElement will create a h3 element for each char in the word.

for ( var i=0; i<a.length; i++){
        var letter = document.createElement("h3");
        ...
}

After the loop the variable var letter will contain the last h3 element created. You defined letter inside a for loop but access it inside a method. It works in javascript but is a bit unexpected to see.

I assume you are not yet familiar with scopes. That is okay for now but maybe also something you want to read about for future progress.

https://www.w3schools.com/js/js_scope.asp

A solution close to your solution, but which uses an array to save all h3 elements. Note that I also removed the parameters of submt() because you did not use them.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hangman</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@500&display=swap" rel="stylesheet"> 
</head>
<body>
    <p class='letter'>Write the letter in here:</p>
    <p class='bad'> the wrong letters:</p>
    <p class='word'>the word:</p>
    <input type="text" class="input" id="input">
     <button class="sub" id='submit' onclick="submt()">submit</button>
    <script src="script.js"></script>  
</body>
</html>

//defineing the word
var a = 'hello';
// makes the lines 
var letters = []
for ( var i=0; i<a.length; i++){
        var letter = document.createElement("h3");
        letter.className = 'letter'+i;
        var j = 2*i+23;
        letter.style ="position: absolute;"+"top: 14%;"+"left: "+j+"%;";
        letter.innerHTML = "_";
        document.body.appendChild(letter);
        letters.push(letter)
    }  

function submt(){
    var inpt = document.getElementById('input');
    if (a.includes(inpt.value)){
        var index = a.indexOf(inpt.value)
        letters[index].innerHTML = a[index]; 
    }else {
        console.log('wrong')
    }
}
user_36650980
Related