title: Javascript HTML DOM select
body: <p>I have a question regarding HTML element selection using javascript.</p>
  
  <p>Here is my code:</p>
  
  <p>Javascript</p>
  
  <pre><code>&lt;script&gt;
      function changeText() { 
          document.getElementsByClassName("CentralContainer")[0].getElementsByClassName("PlayFlowSelect")[0].childNodes[1].innerHTML = "Custom Stream";
                  }
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="CentralContainer"&gt;
          &lt;div class = "PlayFlowSelect"&gt;
              &lt;input type="image" src="./Home Page Resources/ArrowLeftIcon.png" onclick="changeText()"&gt;
              &lt;h2&gt; Top Stories &lt;/h2&gt;
              &lt;input type="image" src="./Home Page Resources/ArrowRightIcon.png" onclick="alert('Trigger Upload Page')"&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>For some reason my selection path in my javascript isn't selecting the h2 innerHTML. I'm not sure why... Any help?</p>