Question

我正在为一个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 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

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

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

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

您的第二个代码段正在错误地访问该阵列。你的单词（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!");                           
  }                                                                             
});

请参阅demo。

尝试再次显示用户输入时获取“未定义”

2 个答案: