Question

我正在构建一个子手游戏，我正在记录用户按下了哪个字母按钮，以及所生成短语中的每个字母是什么。如果有匹配项，我将尝试返回正确；如果没有匹配项，我将返回不正确。

这是我的HTML：

  <div id="phrase" class="section">
    <ul id="list"></ul>
  </div>
  <div id="qwerty" class="section">
    <div class="keyrow">
      <button>q</button><button>w</button><button>e</button><button>r</button><button>t</button><button>y</button><button>u</button><button>i</button><button>o</button><button>p</button>
    </div>
    <div class="keyrow">
      <button>a</button><button>s</button><button>d</button><button>f</button><button>g</button><button>h</button><button>j</button><button>k</button><button>l</button>
    </div>
    <div class="keyrow">
      <button>z</button><button>x</button><button>c</button><button>v</button><button>b</button><button>n</button><button>m</button>
    </div>
  </div>

我在屏幕上显示了每个按钮字母按钮，供用户按下并猜测单词中的字母是什么。

这是我当前的JavaScript：

   // Array of phrases user will have to guess
   var phrases = ['Dog Cat Mouse', 'Billionare Status', 'Nigeria Uganda Ethiopia', 'Life is Good', 'Men in Black'];


   // Choosing a random Phrase.
   function getRandomPhrase(arr){
    var randomPhrase = arr[Math.floor(Math.random() * arr.length)];
    return randomPhrase;
     }
    let winningWords = getRandomPhrase(phrases);

    // Setting Game Display
    function addPhraseToDisplay(arr){
    //iterating through every character in the word
    for (let i = 0; i < arr.length; i++){
    // creating a list item for each character 
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    
    // putting character inside of list item
    li.innerText = arr[i];
    // giving class names to li elements
    if (li.innerText == " "){
        li.className = "space";
    } else 
        li.className = "letter";

    // appending list into UL 
    ul.appendChild(li);
}
  }
  addPhraseToDisplay(winningWords);

   // Allowing user to guess answer

const letter = document.querySelectorAll('button');
const li = document.getElementsByClassName("letter");

 // iterates through every letter in phrase
 for(let i = 0; i < li.length; i++){
  var key = li[i].innerText;   
   }

  // iterate through all buttons, so when pressed, computer knows which button was pressed 
  for (let i = 0; i < letter.length; i++){
   // button is clicked 
   letter[i].addEventListener('click', () => {
    // when button is clicked, it is logged to a variable
    buttonPressed = letter[i].innerText;

    if (buttonPressed == key) {
        console.log("correct");
    }else{
        console.log("incorrect");
    }
  });

}

有人可以告诉我为什么它不起作用吗？

Answer 1

key的值为li[li.length - 1].innerText，因为这是它在第一个for循环的最后一次迭代中分配的值。

如果要比较两个数组中相同索引的值（假设数组的长度相同），则可以这样做。

for(let i = 0; i < letter.length; i++){
    let thisLetter = letter[i];
    let element = li[i];
    thisLetter.addEventListener('click', () => {
        if(element.innerText = thisLetter.innerText) {
            console.log("correct");
        } else {
            console.log("incorrect");
        }
    });
}

遍历两个数组，以查找匹配的值

1 个答案: