JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id = "hangman">
 <h3>Let's play Hangman!</h3>
 <form>
 Pick a word <input type="text" id="input" name="input"><br>

 <button type="button" onClick="game()" >Start</button><br>
 
 Guess a letter: <input type="text" id="guess" name="guess"><br>
 <button type="button" onClick="checkInput()" >Guess</button><br>
 </form>


</div>
<div id = "test">

</div>
</body>

CSS

#hangman {
  height: 300px;
  width: 300px;
  border: 2px solid black;
}

JavaScript

//have spaces/under scores for each letter of the word 


//Have all 26 letters to choose from 

//For however many spaces there are, there are that many lives that the player has 

//if the letter is not in the word, it disappears, and one life is taken away 

//represent the missing word 

//random category 

//depending on word, _ will be generated 

//pick a word, have underscores generated for that word 
//choose from the alphabet 

//type in the word 
//grab value of word/string 

//object for variables 
var hangv = {input: "", under: ""};

function game() { 

var input = document.getElementById("input").value;

hangv.input = input.split("");
console.log(hangv.input);
console.log(hangv.input[3]);
//loop for underscores  
//creates under scores for each letter;
for (i = 0; i < hangv.input.length; i++) { 
hangv.under += "_ ";

}



var grab = document.getElementById("hangman");
var secret = document.createElement("p");
secret.id = "guessp";
var textn = document.createTextNode(hangv.under);
secret.appendChild(textn);
grab.appendChild(secret);
}

function checkInput() { 


var guess = document.getElementById("guess").value;
var guessa = document.getElementById("guessp").innerHTML;
var newStr = "";
if (guess.length > 1) { 
alert("Please enter only one letter.");

}
//var arguess = guess.split("");
//console.log(arguess);
var spguess = document.getElementById("guessp").innerHTML;
var sparr = spguess.split();
console.log(sparr);
for (i = 0; i < hangv.input.length; i++) {
	
//if user's guess is matched against one of the letters of the word, this will execute. 
if (guess == hangv.input[i]) { 
//replace underscores with guessed letter 
newStr = guessa.slice(0, hangv.input[i]) + guess + guessa.slice(hangv.input[i] + 1);


console.log(newStr);


} else { 
console.log("false");

}
guess == "";

}


}