我如何让一个 onclick 函数更改另一个 onclick 函数的属性？

Question

To help visualize what I'm after. I have a button with an onclick() that increments the value of an input by 1

\\ HTML looks like this
<button class="clickme" onclick="pluspotato()">Potato</button>

<script>
var potatocount = 0;
function pluspotato() {
      potatocount = potatocount + 1;
      document.getElementById("potatonum").value = potatocount;
      document.title = potatocount + " Potatoes";
    }
</script>

Now I want to add a button that will change the property of the pluspotato() function to multiply by 2 .

Any help would be greatly appreciated.

Answer 1

If youd like to solve this properly (so that it scales for further enhancements / development) id suggest you read up on Observables. Im am going to write a simple implementation of one and explain it here.

Since you want to change a value at multiple points in your code and read it potentially at multiple points youd have to come up with some sort of interface that allows participants (eg gui elements) to listen to changes made to it (and uptdate the gui accordingly).

Since this is a quite often needed functionality it is best to write an generally applieable solution for this. Like this Class:

class Observable {
  constructor(initalValue) {
    // here come the subscriptions / perticepants that want to listen to changes
    this.listeners = []
    // this is the actual wrapped value. Which can basically be anything. The only 
    // important thing is that nothing changes this property outside of this class.
    // A convention is to mark those properties / functions with an underscore.
    this._value = initalValue
  }
  setValue(value) {
    // first check if the current value is not already the same as the new one.
    // if so: just do nothing
    if (this._value === value) return
    // then set the stored value (so that it can be getted)
    this._value = value
    // loop through all listeners and call them with the now value
    for (let i = 0; i < this.listeners.length; i++) {
      this.listeners[i](value)
    }
  }
  getValue() {
    return this._value
  }
  subscribe(func) {
    // add new listeners to array so that it gets called on setValue
    this.listeners.push(func)

    // Optional: 
    // call added function immediately with current value
    func(this._value)
  }
  unsubscribe(func) {
    //should also exist
  }
}

This class now allows you to add such behaviour.

  let observableCounter = new Observable(0)


  function incrementClick() {
    observableCounter.setValue(observableCounter.getValue() + 1)
  }
  function doubleClick() {
    observableCounter.setValue(observableCounter.getValue() * 2)
  }


  // then simply listen to changes everywhere you want the gui to update
  function update1(value) {
    console.log("Updateing GUI to " + value)
    // document.getElementById()...

    // Side note: dont document.getElementById here. If the element doesnt change,
    // getElement once outside update1 and then simply take the reference here.
    // This way on every change the element needs to be found from scartch.
  }

  observableCounter.subscribe(update1)

Answer 2

You can change the element's onclick function to a function that multiplies.

function multpotato() {
    potatocount *= 2;
    document.getElementById("potatonum").value = potatocount;
    document.title = potatocount + " Potatoes";
}

document.getElementById("change").addEventListener("click", function() {
    document.querySelector(".clickme").onclick = multpotato;
});

Answer 3

You may do conditional operation in pluspotato() depending on activation of the second button:

 var potatocount = 0; var operation = 'add1'; function pluspotato() { let potatocount; if(operation === 'multiply2') { potatocount = Number(document.getElementById("potatonum").value) * 2; } else{ potatocount = Number(document.getElementById("potatonum").value) + 1; } document.getElementById("potatonum").value = potatocount; document.title = potatocount + " Potatoes"; } function changePluspotato() { operation = 'multiply2'; }

 <button class="clickme" onclick="pluspotato()">Potato</button> <input id="potatonum"></input><br> <button id="change" onclick="changePluspotato()">changePluspotato</button>

Once you click the second button, the potato button starts to multiply by 2