Question

我想先点击让 getNumberBtn 成为 getNumberBtnn 和第二个让它回到 getNumberBtn 函数。当我点击时，函数运行但不改变 onclick 属性

var equation = 0;

function getNumberBtn() {
  document.getElementById("apply").onclick = getNumberBtnn();
  equation = equation + x;
}
function getNumberBtnn() {
  document.getElementById("apply").onclick = getNumberBtn();
  equation = equation + x;
}

<div>

  <input type="number" id="number" min="1" max="1000">

  <button id="apply" onclick=getNumberBtn()>Apply</button>

</div>

Answer 1

您不分配事件处理程序，而是分配函数的结果。

正如我在评论中所说，从您分配的函数末尾删除 ()。

您也不会将任何内容分配给 x

不过我建议你这样做：

使用事件监听器
使用函数来决定调用哪个函数
拥有对象中函数的列表
其实有不同的功能

let equation = 0;
const funcs = {

  "btn": function(x) {
    equation += x; // for example
    console.log("btn", equation)
  },
  "btnn": function(x) {
    equation *= x; // for example
    console.log("btnn", equation)
  }
}

document.getElementById("apply").addEventListener("click", function(e) {
  const tgt = e.target;
  const func = tgt.dataset.func
  tgt.dataset.func = func === "btn" ? "btnn" : "btn"; // toggle the function
  funcs[func](+document.getElementById("number").value); // call the chose function with a value
})

<div>

  <input type="number" id="number" min="1" max="1000">

  <button type="button" data-func="btn" id="apply">Apply</button>

</div>

Answer 2

当您将函数分配给 onclick 时，您实际上是在调用该函数并因此创建了一个无限递归。

您可以将函数名称分配给 onclick -

var equation = 0;

function getNumberBtn() {
  document.getElementById("apply").onclick = getNumberBtnn;
  equation = equation + document.getElementById("number").value;
  console.log('Called getNumberBtn');
}

function getNumberBtnn() {
  document.getElementById("apply").onclick = getNumberBtn;
  equation = equation + document.getElementById("number").value;
  console.log('Called getNumberBtnn');
}

<div>

  <input type="number" id="number" min="1" max="1000">

  <button id="apply" onclick=getNumberBtn()>Apply</button>

</div>

但我建议您使用 DOM event registration 而不是使用 addEventListener 和 removeEventListener-

var equation = 0;

var apply = document.getElementById("apply");

apply.addEventListener('click', getNumberBtn);

function getNumberBtn() {
  apply.removeEventListener('click', getNumberBtn);
  apply.addEventListener('click', getNumberBtnn);
  equation = equation + document.getElementById("number").value;
  console.log('Called getNumberBtn');
}

function getNumberBtnn() {
  apply.removeEventListener('click', getNumberBtnn);
  apply.addEventListener('click', getNumberBtn);
  equation = equation + document.getElementById("number").value;
  console.log('Called getNumberBtnn');
}

<div>

  <input type="number" id="number" min="1" max="1000">

  <button id="apply">Apply</button>

</div>

Answer 3

编辑 () 属性时从函数名称前面删除 onclick

function getNumberBtn() {
  document.getElementById("apply").onclick = getNumberBtnn;
  equation = equation + x;
}
function getNumberBtnn() {
  document.getElementById("apply").onclick = getNumberBtn;
  equation = equation + x;
}

每次出现错误时如何更改单击功能

3 个答案: