Unable to show input value in InnerText-CodePudding

Looking for some help. I am still very new to Javascript. A simple hangman game where I enter a letter and it showed fill in the spaces of that "phrase". I can generate the "_ _ _ _ _" however the input is only accepting one letter at a time and erasing the previous letter selected. Any help?

/*---- constants -----*/
const phrases = ["basketball", "soccer", "baseball"];


let answer

let guess 
let message
let wordDisplay = ""

const inputEl = document.querySelector('input')
const btn = document.querySelector('button')
const displayEl = document.querySelector('#wordDisplay')



/*---- events -----*/
btn.addEventListener('click', handleUserGuess)






/*---- functions -----*/
init();
render();


function init() {
    guess = null
    answer = phrases[Math.floor(Math.random() * phrases.length)]; //generate random word
}


function render() {
    
    for(let i = 0; i < answer.length; i  )
    {
        displayEl.innerText = wordDisplay  = "_ ";
    }
}
  

function handleUserGuess(event){
    guess = inputEl.value;
  for (let j = 0; j < answer.length; j  ) {
       if(answer[j] === guess){
        displayEl.innerText = guess;
}
  }
}

<body>
    <h1>Hangman</h1>
    <div> Guess the Letter
        <input type="text"/>
        <button>Guess</button>

    <p id="wordDisplay"></p>
    </div>
            
    <script defer src="js/main.js"></script>
</body>

CodePudding user response：

In the following answer, I've created a simplified version of my answer in the comments, using an array and replacing underscores with the right letter from the phrase_array. The code can be beautified, but I didn't really get into that. However, right now it is functional, the word is basketball

EDIT:

Added extra functionality, so the user is now able to enter more than one character at a time.

/*---- constants -----*/
const phrases = ["basketball", "soccer", "baseball"];
const phrase_array = ["b", "a", "s", "k", "e", "t", "b", "a", "l", "l"];
const guess_array = ["_", "_", "_", "_", "_", "_", "_", "_", "_", "_"];

let answer

let guess
let message
let wordDisplay = ""

const inputEl = document.querySelector('input')
const btn = document.querySelector('button')
const displayEl = document.querySelector('#wordDisplay')

/*---- events -----*/
btn.addEventListener('click', handleUserGuess)

/*---- functions -----*/
init();
render();

function init() {
  guess = null
  answer = phrases[Math.floor(Math.random() * phrases.length)]; //generate random word
}

function render() {
  displayEl.innerHTML = "";
  for (let i = 0; i < guess_array.length; i  ) {
    displayEl.innerText  = guess_array[i];
  }
}

function handleUserGuess(event) {
  guess = inputEl.value;
  for (var i = 0; i < guess.length; i  ) {
    for (let j = 0; j < phrase_array.length; j  ) {
      if (phrase_array[j] === guess.charAt(i)) {
        guess_array[j] = guess.charAt(i);
        render();
      }
    }
  }
}

#wordDisplay {
  letter-spacing: .2rem;
}

<body>
  <h1>Hangman</h1>
  <div> Guess the Letter
    <input type="text" />
    <button>Guess</button>
    <p id="wordDisplay"></p>
  </div>
  <script defer src="js/main.js"></script>
</body>

CodePudding user response：

For handling text input values you can use something like:

inputEl.addEventListener("change", handleInputChange);

function handleInputChange(event) {
    guess = event.target.value;
    console.log("user input: ", guess); // return the user typed value on clicking the guess button
}

you may need to remove/comment the guess = inputEl.value; assignment inside the handleUserGuess function (also the paramater event since it will no longer be in use)