How to extract text from div elements that are in a Nodelist Array

JavaScript
1

Learning javascript, and I keep getting stuck on little obstacles here and there but this one has really stumped me. Anyways I’m making a hangman game and I’m trying to make the program know when the user has won by comparing the random selected word with the ‘letters’ that are in each ‘div’ box. The problem is that these letters are in a Nodelist Array (from what I’ve come to understand) and I can’t figure out how to get the text that is in each index of the array. I’ve tried converting the nodelist array to a regular array as-well but no luck. Each index holds a div element, and inside each div element is the letter I need to extract. I would later like to build a string out of the letters so that I can compare it to the random selected word. I haven’t found any info online that explains how to achieve what I’m trying to do. Is this even possible? :confused: I’m not sure how to extract the div elements and then from those div elements, extract the letter. Here are some code examples below and a link to the hangman page. (Warning, the code is very crude!).


 // create a blank boxes (div elements) for holding each letter of
 // selected random word
 for(i = 0 ; i< wordLength; i++){
     var divTag = document.createElement("div");
     divTag.id = "div" + i;
     divTag.className = 'wordy';
     hangManDiv.appendChild(divTag);



 /// get all divs that were created and add letter inside each div as user guesses
 var letterDivs = document.getElementsByClassName('wordy');
 for(i =0; i<returnedWord.length; i++){
    if(letter === returnedWord.charAt(i)){
    var foundMatchingLetter = true;
    letterDivs[i].innerHTML = letter;
 }

   //  convert the nodelist- 'letterDivs' to an array?
  // is this necessary?
  var letterDivsArray = Array.prototype.slice.call(letterDivs,0);

  // I think a for-loop would work but clueless on how to get the letters that are inside each div in the array
  for (var i = 0; i < letterDivsArray.length; i++) {

   }
2

Hi there,

Welcome to the forums :slight_smile:

Essentially the HTML behind the word you are trying to examine looks like this:

<div id="div0" class="wordy">s</div>
<div id="div1" class="wordy">a</div>
<div id="div2" class="wordy">a</div>
<div id="div3" class="wordy">b</div>

You can access the content of those divs using innerHTML and concatenate what you find into a string, which you can then compare with your solution.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hangman</title>
  </head>
  
  <body>
    <div id="div0" class="wordy">s</div>
    <div id="div1" class="wordy">a</div>
    <div id="div2" class="wordy">a</div>
    <div id="div3" class="wordy">b</div>
  
    <script>
      var solution = "saab",
          letters = document.getElementsByClassName("wordy"),
          attempt = "";
      
      for (var i=0, len=letters.length; i < len; i++){
        attempt += letters[i].innerHTML;
      }
      
      console.log("The attempt is " + attempt);
      console.log("The solution is " + solution);
      if (attempt === solution){
        console.log("They match!");
      } else {
        console.log("They don't match!");
      }
    </script>
  </body>
</html>

It might be noted that depending on your level of JS knowledge, this probably isn’t the best way to do this, but seeing as this is more of a learning exercise for you, I’ll not go on about that :slight_smile:

Good luck!

P.S. If you’re not sure how to read input logged to the console, check out this brief tutorial.