SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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? 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!).

    Code:
     // 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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Welcome to the forums

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

    Code:
    <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.

    Code:
    <!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

    Good luck!

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •