title: Why does the number of <script> elements affect globally defined functions?
body: <p>I do not understand why the code blocks below are working differently when the buttons are clicked. They both contain two functions that alert different messages, the difference being that in the second example there are separate <code>&lt;script&gt;</code> blocks.</p>
  
  <p>In the first example, both buttons alert <code>Hello too!!!</code>, but in the second, they alert the individual messages from each function.</p>
  
  <p>The first code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button id="red"&gt;Hello!&lt;/button&gt;
    &lt;button id="green"&gt;HelloTooo&lt;/button&gt;
    &lt;script&gt;
      function func() {
        alert('hello!');
      }
      document.getElementById("red").onclick = func;
  
      function func() {
        alert('Hello too!!!');
      }
      document.getElementById("green").onclick = func;
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The second code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button id="red"&gt;Hello!&lt;/button&gt;
    &lt;button id="green"&gt;HelloTooo&lt;/button&gt;
    &lt;script&gt;
      function func() {
        alert('hello!');
      }
      document.getElementById("red").onclick = func;
    &lt;/script&gt;
    &lt;script&gt;
      function func() {
        alert('Hello too!!!');
      }
      document.getElementById("green").onclick = func;
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why does it behave in this fashion, when both sets of <code>func</code> are defined in the global scope?</p>