title: Javascript to get the active li class name
body: <p>I need to get the class name of the active <code>&lt;li&gt;</code> on different checkout steps on my page as they are called by javascript.</p>
  
  <p>For example:</p>
  
  <p>Step1</p>
  
  <pre><code>&lt;ul class="checkout-bar"&gt;
  &lt;li class="active first"&gt;&lt;/li&gt;
  &lt;li class="next"&gt;&lt;/li&gt;
  &lt;li class="last"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Step2</p>
  
  <pre><code>&lt;ul class="checkout-bar"&gt;
  &lt;li class="visited first"&gt;&lt;/li&gt;
  &lt;li class="active"&gt;&lt;/li&gt;
  &lt;li class="last"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Step3</p>
  
  <pre><code>&lt;ul class="checkout-bar"&gt;
  &lt;li class="visited first"&gt;&lt;/li&gt;
  &lt;li class="visited "&gt;&lt;/li&gt;
  &lt;li class="active last"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So i need to be able to pass to the datalayer at each step:</p>
  
  <p>step1
  "active first"</p>
  
  <p>Step2
  "active"</p>
  
  <p>Step3
  "active last"</p>
  
  <p>I've tried this but it doesn't work:</p>
  
  <pre><code>function() {
  
  var element=document.querySelector('ul.checkout-bar &gt; li');
  
  return element ? element.value : undefined;
  
  }
  </code></pre>