title: Setting button.onclick via button click activates on first button press
body: <p>So I'm trying to create a button that when pressed changes the content of an html page and updates the button to change its next function. However, whenever I use <code>.onclick</code> I end up printing the &quot;2&quot; to the console while still on the first press of the button. I've tried using <code>.click</code> as well, and the only thing that I can find that works is setting the function directly, however this is untidy and long. I wondered if there was another way to do this with cleaner code.</p>
  <p>html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en-US&quot;&gt;
    &lt;body&gt;
      &lt;script src=&quot;Path_To_File&quot;&gt;&lt;/script&gt;
  
        &lt;p id=&quot;text&quot;&gt;
          &lt;!-- text here --&gt;
        &lt;/p&gt;
  
      &lt;button id=&quot;b1&quot; type=&quot;button&quot; onclick=&quot;pageFlip(1)&quot;&gt;Button&lt;/button&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>function pageFlip(page) {
    var p = document.getElementById(&quot;text&quot;);
    var b1 = document.getElementById(&quot;b1&quot;);
    var b2 = document.getElementById(&quot;b2&quot;);
  
    switch (page) {
      case 1:
        p.innerHTML = &quot;newText&quot;;
        b1.innerHTML = &quot;newText&quot;;
        b1.onclick = pageFlip(2);
        break;
      case 2:
        console.log(&quot;2&quot;);
        break;
    }
  }
  </code></pre>
  <p>What works:</p>
  <pre><code>b1.onclick = function changeButton() {
      pageFlip(2)
  }
  </code></pre>