Trying to reference a header with no id, within a div
<p>I am essentially creating a simple looking progress bar. I have 4 sections, and above each section is the progress bar. For example, in section 2, the progress bar for this will have step 1 highlighted in green. For section 3, the progress bar for this will have step 1 and 2 highlighted in green etc.</p>

<p>Class step-incomplete is the same as step-complete just with the background difference.</p>

<p>At the moment, I have a few problems. I can't find out how to reference the headers in each div. Whatever I do I get nothing or [object HTMLHeadingElement]. The loop itself is fine, but I can't find a way to change the class name for a specific header, in a specific div.</p>

<p>Code is below:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;

&lt;head&gt;
  &lt;style type="text/css"&gt;
    .step-complete {
      display: inline;
      border-style: hidden;
      background: green;
    }
    .step-incomplete {
      display: inline;
      border-style: hidden;
      background: none;
    }
  &lt;/style&gt;

  &lt;script type="text/javascript"&gt;
    var numOfSections = 4;

    function changeColour() {
      for (i = 1; i &lt;= numOfSections; i++) {
        if (i != 1) {
          alert(i);
          var progress = document.getElementById('progress-' + i).id;
          alert(progress);
          for (j = i - 1; j &gt;= 1; j--) {
            alert(j);
            var header = document.getElementsByName("step-" + j);
            alert(progress.header.className);

          }
        }
      }
    }

    window.onload = function() {
      changeColour();
    };
  &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;button id="push" onclick="changeColour()"&gt;click me&lt;/button&gt;


  &lt;div id="progress-1"&gt;
    &lt;h1 name="step-1" class="step-incomplete"&gt;Step1&lt;/h1&gt;
    &lt;h1 name="step-2" class="step-incomplete"&gt;Step2&lt;/h1&gt;
    &lt;h1 name="step-3" class="step-incomplete"&gt;Step3&lt;/h1&gt;
    &lt;h1 name="step-4" class="step-incomplete"&gt;Step4&lt;/h1&gt;
  &lt;/div&gt;
  &lt;h1 id="header1"&gt;Header1&lt;/h1&gt;
  &lt;p&gt;..................
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
  &lt;/p&gt;

  &lt;div id="progress-2"&gt;
    &lt;h1 name="step-1" class="step-incomplete"&gt;Step1&lt;/h1&gt;
    &lt;h1 name="step-2" class="step-incomplete"&gt;Step2&lt;/h1&gt;
    &lt;h1 name="step-3" class="step-incomplete"&gt;Step3&lt;/h1&gt;
    &lt;h1 name="step-4" class="step-incomplete"&gt;Step4&lt;/h1&gt;
  &lt;/div&gt;
  &lt;h1 id="header2"&gt;Header2&lt;/h1&gt;
  &lt;p&gt;..................
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
  &lt;/p&gt;

  &lt;div id="progress-3"&gt;
    &lt;h1 name="step-1" class="step-incomplete"&gt;Step1&lt;/h1&gt;
    &lt;h1 name="step-2" class="step-incomplete"&gt;Step2&lt;/h1&gt;
    &lt;h1 name="step-3" class="step-incomplete"&gt;Step3&lt;/h1&gt;
    &lt;h1 name="step-4" class="step-incomplete"&gt;Step4&lt;/h1&gt;
  &lt;/div&gt;
  &lt;h1 id="header3"&gt;Header3&lt;/h1&gt;
  &lt;p&gt;..................
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
  &lt;/p&gt;

  &lt;div id="progress-4"&gt;
    &lt;h1 name="step-1" class="step-incomplete"&gt;Step1&lt;/h1&gt;
    &lt;h1 name="step-2" class="step-incomplete"&gt;Step2&lt;/h1&gt;
    &lt;h1 name="step-3" class="step-incomplete"&gt;Step3&lt;/h1&gt;
    &lt;h1 name="step-4" class="step-incomplete"&gt;Step4&lt;/h1&gt;
  &lt;/div&gt;
  &lt;h1 id="header4"&gt;Header4&lt;/h1&gt;
  &lt;p&gt;..................
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
  &lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>The end goal is shown in this picture:</p>

<p><a href="http://i.stack.imgur.com/PcONf.png" rel="nofollow">image of end goal</a></p>