Javascript 获得'；未定义'；第二次尝试显示用户输入时

我正在为javascript课程做一个猜字游戏。用户有五次猜测来识别一个单词，我希望每次猜测都能将输入显示给用户。创建一个5*5正方形的区域，在用户猜测后水平显示单词。 我已经让第一行工作了，并且认为在接下来的四行中使用相同的代码会很容易，但是我得到的是“未定义”而不是第二行中的实际字母。我肯定我遗漏了一些琐碎的东西，但我不知道它是什么。任何帮助都将不胜感激！ 以下是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>

第一猜测
第二猜测

还有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!");                              
  }                                                                                
})

var words=[“苹果”、“柠檬”、“瓜”、“葡萄”、“桃”]；
var currentWord=words[Math.floor（Math.random（）*5）]；
console.log（currentWord）；
var guessCheck=document.getElementsByTagName（“按钮”）[0]；
addEventListener（“单击”，函数（）{
var guessWord=document.getElementsByTagName（“输入”）[0]。值；
var letterDisplay=document.getElementsByTagName（“td”）；
对于（var i=0；i<5；i++）{
letterDisplay[i].innerHTML=guessWord[i]；
如果（猜测字[i]==当前字[i]）{
字母显示[i].style.background=“#00ff25”；
}否则{
字母显示[i].style.background=“#ff0000”；
}                                                                              
}                                                                                
如果（猜测字长<5）{
警报（“您必须准确输入5个字符！”）；
}                                                                                
})

下面是我开始重复代码的地方：

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!");                           
  }                                                                             
})

var guessCheck=document.getElementsByTagName（“按钮”）[1]；
addEventListener（“单击”，函数（）{
var guessWordRowTwo=document.getElementsByTagName（“输入”）[1]。值；
var letterDisplay=document.getElementsByTagName（“td”）；
对于（var i=7；i<12；i++）{
letterDisplay[i].innerHTML=guessWordRowTwo[i]；
如果（猜测词rowtow2[i]==currentWord[i]）{
字母显示[i].style.background=“#00ff25”；
}否则{
字母显示[i].style.background=“#ff0000”；
}                                                                           
}                                                                             
如果（guessWordRowTwo.length<5）{
警报（“您必须准确输入5个字符！”）；
}                                                                             
})

您对

guessWordRowTwo

和

currentWord

使用了错误的索引

这应该对你有用

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!");
    }
}) 

guessCheck.addEventListener（“单击”，函数（）{
var guessWordRowTwo=document.getElementsByTagName（“输入”）[1]。值；
var letterDisplay=document.getElementsByTagName（“td”）；
console.log（猜测词第二行）；
对于（var i=0；i<5；i++）{
letterDisplay[i+7].innerHTML=guessWordRowTwo[i]；
如果（猜测词rowtow2[i]==currentWord[i]）{
字母显示[i+7]。style.background=“#00ff25”；
}
否则{
字母显示[i+7]。style.background=“#ff0000”；
}    
}
if（猜测词rowtwo.length<5）{
警报（“您必须准确输入5个字符！”）；
}
}) 

无论如何，我建议你尽快检查输入

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

Check.addEventListener（“单击”，函数（）{
var guessWordRowTwo=document.getElementsByTagName（“输入”）[1]。值；
if（猜测词rowtwo.length<5）{
警报（“您必须准确输入5个字符！”）；
}
...
})

您的第二个代码段访问数组时出错。您的单词（

input.value

）长度为5个字符，您正在尝试从7到11个字符

您还需要修改相应行中的单元格：

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

尽可能多地保留代码，您可以这样修复：

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!");                           
  }                                                                             
});

var guessCheck=document.getElementsByTagName（“按钮”）[1]；
addEventListener（“单击”，函数（）{
var guessWordRowTwo=document.getElementsByTagName（“输入”）[1]。值；
//改变
var letterDisplay=document.getElementsByTagName（“tr”）[1].getElementsByTagName（“td”）；
//改变
对于（var i=0；i<5；i++）{
letterDisplay[i].innerHTML=guessWordRowTwo[i]；
如果（猜测词rowtow2[i]==currentWord[i]）{
字母显示[i].style.background=“#00ff25”；
}否则{
字母显示[i].style.background=“#ff0000”；
}