时间戳

首页 > 解决方案 > 如何让一个 onclick 函数更改另一个 onclick 函数的属性？

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

问题描述

帮助可视化我所追求的。我有一个按钮，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.

任何帮助将不胜感激。

标签： javascripthtml

解决方案

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

由于您想在代码中的多个点更改一个值并可能在多个点读取它，因此您必须想出某种接口，允许参与者（例如 gui 元素）收听对其所做的更改（并更新 gui因此）。

由于这是一个经常需要的功能，因此最好为此编写一个普遍适用的解决方案。喜欢这个类：

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)

推荐阅读