title: javascript - button needs to be click twice for onclick to trigger
body: <p>Why does my button need to be clicked twice for the onclick event to trigger? 
  There're some other thread on stackoverflow with the same problem, but in all the thread i found, the original poster puts the event handler inside the function. It's not like that with my code.</p>
  
  <p>Html</p>
  
  <pre><code>&lt;body&gt;
      &lt;ul id="parentList"&gt;
          &lt;li&gt;First child&lt;/li&gt;
          &lt;li&gt;Second child&lt;/li&gt;
          &lt;li&gt;Third child&lt;/li&gt;
          &lt;li&gt;Forth child&lt;/li&gt;
          &lt;li&gt;Fifth child&lt;/li&gt;
      &lt;/ul&gt;
      &lt;button type="button" id="delete"&gt;Delete first child&lt;/button&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>var parentList = document.getElementById("parentList");
  document.getElementById("delete").onclick = function() {
      parentList.removeChild(parentList.firstChild);
  };
  </code></pre>
  
  <p>Demonstration: <a href="https://jsfiddle.net/morgianna1802/ofLvac32/1/" rel="noreferrer">onclick-error</a></p>