How to change the innerHTML of the char js
Question
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>
2 answers
solution1
3 ACCPTED 2021-04-26 15:33:02
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>
solution2
3 2021-04-26 15:50:09
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')
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.