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

如果您想正确解决此问题（以便扩展以进行进一步的增强/开发），id建议您阅读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)

Answer 2

您可以将元素的onclick函数更改为可以相乘的函数。

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

您可以在pluspotato（）中执行条件操作，具体取决于第二个按钮的激活：

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>

单击第二个按钮后，马铃薯按钮开始乘以2

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

3 个答案: