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>

\\HTML看起来像这样
马铃薯
var-potatocount=0；
函数pluspotato（）{
potatocount=potatocount+1；
document.getElementById（“potatonum”）.value=potatocount；
document.title=potatocount+“土豆”；
}

现在我想添加一个按钮，将

pluspotato（）

函数的属性更改为乘以

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;
});

---

根据第二个按钮的激活情况，您可以在pluspotato（）中执行条件操作：

var potatocount=0；
var操作='add1'；
函数pluspotato（）{
让土豆算数；
如果（操作=='multiply2'）{
potatocount=编号（document.getElementById（“potatonum”）.value）*2；
}
否则{
potatocount=Number（document.getElementById（“potatonum”）.value）+1；
}
document.getElementById（“potatonum”）.value=potatocount；
document.title=potatocount+“土豆”；
}
函数changePluspotato（）{
运算='multiply2'；
}

马铃薯

---

changePluspotato如果您想正确地解决这个问题（以便它可以扩展以进行进一步的增强/开发），我建议您阅读可观察到的内容。我将写一个简单的实现，并在这里解释它

由于您希望在代码中的多个点上更改一个值，并在多个点上读取该值，因此必须提供某种类型的界面，允许参与者（例如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
  }
}

---

使用第二个

var

，并从第二个按钮的onclick更改它。在

pluspotato

函数中，使用

if

/

else

根据第二个变量的值执行操作。非常好，您提供了一个众所周知的可重用概念，而不仅仅是一个蓬松的意粉解决方案！（我只是怀念那些没有被引用的东西，但对谷歌来说，这应该很容易）

  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)