Getting 'undefined' when trying to display user input a second time

Question

I'm making a word-guessing game for a javascript course. The user gets five guesses to identify a word, and I want the input to be displayed back to the user for every guess. Made a field of 5 * 5 squares, words to be displayed horizontally after the user makes his/her guess.

I've got the first row working, and thought it'd be easy to use the same code for the next four rows, but I'm getting 'undefined' instead of the actual letters in the second row. I'm sure I'm missing something trivial, but can't figure out what it is. Any help would be massively appreciated!

Here's the html:

    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="text" maxlength="5" placeholder="Enter 5 letters"><button>1st Guess</button></td>
        <td id="hiddenPointBox"></td>
    </tr>

    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="text" maxlength="5" placeholder="Enter 5 letters"><button>2nd Guess</button></td>
        <td></td>
    </tr>

And the javascript:

var words = ["apple", "lemon", "melon", "grape", "peach"];                         
var currentWord = words[Math.floor(Math.random() * 5)];                            
console.log(currentWord);    

var guessCheck = document.getElementsByTagName("button")[0];                       
guessCheck.addEventListener("click", function() {                                  
  var guessWord = document.getElementsByTagName("input")[0].value;                 
  var letterDisplay = document.getElementsByTagName("td");                         
  for (var i = 0; i < 5; i++) {                                                    
    letterDisplay[i].innerHTML = guessWord[i];                                     
    if (guessWord[i] === currentWord[i]) {                                         
      letterDisplay[i].style.background = "#00ff25";                               
    } else {                                                                       
      letterDisplay[i].style.background = "#ff0000";                               
    }                                                                              
  }                                                                                

  if (guessWord.length < 5) {                                                      
    alert("You have to enter exactly 5 characters!");                              
  }                                                                                
})

Here's where I started to repeat the code:

var guessCheck = document.getElementsByTagName("button")[1];                       
guessCheck.addEventListener("click", function() {                               
  var guessWordRowTwo = document.getElementsByTagName("input")[1].value;        
  var letterDisplay = document.getElementsByTagName("td");                      
  for(var i = 7; i < 12; i++) {                                                 
    letterDisplay[i].innerHTML = guessWordRowTwo[i];                            
    if (guessWordRowTwo[i] === currentWord[i]) {                                
      letterDisplay[i].style.background = "#00ff25";                            
    } else {                                                                    
      letterDisplay[i].style.background = "#ff0000";                            
    }                                                                           
  }                                                                             
  if (guessWordRowTwo.length < 5) {                                             
    alert("You have to enter exactly 5 characters!");                           
  }                                                                             
})

Answer 1

You are using wrong indexes for guessWordRowTwo and currentWord .

This should work for you

guessCheck.addEventListener("click", function() {    
    var guessWordRowTwo = document.getElementsByTagName("input")[1].value;       
    var letterDisplay = document.getElementsByTagName("td");
    console.log(guessWordRowTwo);
    for(var i = 0; i < 5; i++) {    
        letterDisplay[i+7].innerHTML = guessWordRowTwo[i];

        if (guessWordRowTwo[i] === currentWord[i]) {        
            letterDisplay[i+7].style.background = "#00ff25";    
        }
        else {        
            letterDisplay[i+7].style.background = "#ff0000";        
        }    
    }
    if (guessWordRowTwo.length < 5) {
        alert("You have to enter exactly 5 characters!");
    }
}) 

Anyway I suggest you to check inputs as soon as possible

Check.addEventListener("click", function() {
    var guessWordRowTwo = document.getElementsByTagName("input")[1].value;
    if (guessWordRowTwo.length < 5) {
        alert("You have to enter exactly 5 characters!");
    }
    ...
})

Answer 2

Your second code snippet is accessing the array wrong. Your words ( input.value ) are 5 characters length and you are trying to get from 7 to 11.

Also you need to modify the cells in the corresponding row:

document.getElementsByTagName("tr")[1].getElementsByTagName("td");

Trying to keep your code as much as possible you can fix it like this:

var guessCheck = document.getElementsByTagName("button")[1];                       
guessCheck.addEventListener("click", function() {                               
  var guessWordRowTwo = document.getElementsByTagName("input")[1].value;
  // CHANGED        
  var letterDisplay = document.getElementsByTagName("tr")[1].getElementsByTagName("td");
  // CHANGED                      
  for(var i = 0; i < 5; i++) {                                                 
    letterDisplay[i].innerHTML = guessWordRowTwo[i];                            
    if (guessWordRowTwo[i] === currentWord[i]) {                                
      letterDisplay[i].style.background = "#00ff25";                            
    } else {                                                                    
      letterDisplay[i].style.background = "#ff0000";                            
    }                                                                           
  }                                                                             
  if (guessWordRowTwo.length < 5) {                                             
    alert("You have to enter exactly 5 characters!");                           
  }                                                                             
});

See demo .