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

Question

帮助想象我所追求的东西。我有一个带有 onclick() 的按钮，它会将输入的值增加 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>

现在我想添加一个按钮，该按钮将更改 pluspotato() 函数的属性以乘以 2。

任何帮助将不胜感激。

Answer 1

如果你想正确解决这个问题(以便它可以扩展以进一步增强/开发)，我建议你阅读 Observables。我将编写一个简单的实现并在这里进行解释。

由于您想要在代码中的多个点更改值并可能在多个点读取它，因此您必须想出某种接口(interface)，允许参与者(例如 gui 元素)监听对其所做的更改(并且相应地更新 GUI)。

由于这是一个经常需要的功能，因此最好为此编写一个普遍适用的解决方案。喜欢这个类(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
  }
}

此类现在允许您添加此类行为。

  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)