CODEWITHSUNDEEP
javascript
Owen
Owen

Reputation: 75

iterating through two arrays, to find which values match

I am building a hangman game, and I am logging which letter button the user has pressed, and what each letter in the generated phrase is. I am trying to return correct, if there's a match and incorrect if there isn't.

This is my 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>

I have every button letter button displayed on the screen for the user to press and guess what the letters in the word are.

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

}

Can anyone describe to me why it is not working?

Upvotes: 0

Views: 41

Answers (1)

Rune FS
Rune FS

Reputation: 21742

key will have the value of li[li.length - 1].innerText because that's the value it is assigned in the last iteration of the first for loop.

If you are looking to compare the values of identical indices in two arrays (assuming the arrays are of the same length) you can do it like this.

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

Upvotes: 1

Related Questions