title: I am getting empty values for sports-title and third
body: <ul>
  <li>i am new to js.</li>
  <li>can you tell me why I am getting empty values for sports-title and third.</li>
  <li>since we have one div with content in it.
  sports-title---->{"0":{}}
  third---->{}</li>
  <li>providing my code below.</li>
  </ul>
  
  <pre class="lang-or-tag-here prettyprint-override"><code>findStringInsideDiv() {
  
     /* 
     var str = document.getElementsByClassName("sports-title").innerHTML;
     */
      var sportsTitle = document.getElementsByClassName("sports-title");
      var third = sportsTitle[0];
      var thirdHTML = third.innerHTML
  
  
  
      //str = str.split(" ")[4];
      console.log("sports-title----&gt;" + JSON.stringify(sportsTitle));
          console.log("third----&gt;" + JSON.stringify(third));
      console.log("thirdHTML----&gt;" + JSON.stringify(thirdHTML));
  
  
      if ( thirdHTML === " basketball football swimming " ) {
  
            console.log("matching basketball----&gt;");
  
  
        var menu = document.querySelector('.sports');
        menu.classList.add('sports-with-basketball');
  
        // how to add this class name directly to the first div after body.
        // but we are not rendering that div in accordion
        //is it possible
  
      }
  
      else{
      console.log("not matching");
      }
  
    }
  </code></pre>