title: javascript : how to change the element innerHTML of a paraleling div class
body: <p>html:
  `
  </p>
  
  <pre><code>&lt;li&gt;&lt;div class="zb_font"&gt;&lt;font color="#FF0000"&gt; * &lt;/font&gt;first&lt;/div&gt;&lt;/li&gt;
  &lt;li&gt;&lt;div class="zb_font"&gt;&lt;font color="#FF0000"&gt; * &lt;/font&gt;second&lt;/div&gt;&lt;/li&gt;
  &lt;li&gt;&lt;div class="zb_font"&gt;&lt;font color="#FF0000"&gt; * &lt;/font&gt;third&lt;/div&gt;&lt;/li&gt;
  &lt;li&gt;&lt;div class="zb_font"&gt;&lt;font color="#FF0000"&gt; * &lt;/font&gt;last&lt;/div&gt;&lt;/li&gt;
  </code></pre>
  
  <p>`</p>
  
  <p>javascript:
  <code>function myFunc(){
             var change = document.getElementsByClassName('zb_font')[3];
             change.innerHTML = '4';
  }</code></p>
  
  <p>I am sure the function is called, but I still get "TypeError: change is undefined".</p>