Блог

Я создаю игру hangman и регистрирую, какую буквенную кнопку нажал пользователь, и какова каждая буква в сгенерированной фразе. Я пытаюсь вернуть правильный, если есть совпадение, и неправильный, если его нет.

Это мой 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>
  

У меня на экране отображается каждая кнопка button letter, чтобы пользователь мог нажать и угадать, какие буквы в слове.

Это мой текущий 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");
    }
  });
  

}

Кто-нибудь может описать мне, почему это не работает?

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