title: onClick functions run when being changed?
body: <p>I'm working on an HTML file that has some buttons with onClick attributes. I've found ways to change the function that runs, but when I change it the new function runs. I've looked at other questions that are similar, but I wasn't able to find an answer.</p>
  
  <pre class="lang-js prettyprint-override"><code>class buttonController {
    constructor(){
      this.button1 = document.getElementById("button1");
      this.button2 = document.getElementById("button2");
      this.button3 = document.getElementById("button3");
    }
  
    setButton1(p_func, text){
      this.button1.textContent = text;
      document.getElementById("button1").onclick = p_func; //I've tried using .setAttribute too
    }
  
    setButton2(p_func, text){
      this.button2.textContent = text;
      document.getElementById("button2").onclick = p_func;
    }
  
    setButton3(p_func, text){
      this.button3.textContent = text;
      document.getElementById("button3").onclick = p_func;
    }
  
    detectState(){ //the issue is here. if you set the function to a new function, it will run.
      if (g_state == "COMBAT"){
        this.setButton1(genericFunction(), "Button 1");
        this.setButton2(anotherFunction(), "Button 2");
        this.setButton3(oneMoreFunction(), "Button 3");
      }
  
      if (g_state == "IDLE"){
        this.setButton1(function(){consoleController.log("button1 pressed");}, "button 1");
        this.setButton2(function(){consoleController.log("button2 pressed");}, "button 2");
        this.setButton3(function(){consoleController.log("button3 pressed");}, "button 3");
      }
    }
  }
  </code></pre>
  
  <p>I'd like to avoid using jQuery if possible.</p>