iterating through two arrays, to find which values match

Question

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?

After a quick look... why you impose the user to use Uppercase? Can't you compare two strings using case insensitive? I.e: "u" !== "U" — Roko C. Buljan
– Roko C. Buljan, Commented Aug 12, 2020 at 18:55

Rune FS · Accepted Answer · 2020-08-12 19:28:57Z

1

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

edited Aug 12, 2020 at 19:28

answered Aug 12, 2020 at 19:02

Rune FS

21.7k7 gold badges65 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

iterating through two arrays, to find which values match

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related