时间戳

首页 > 解决方案 > 每次出现错误时如何更改点击功能

javascript - 每次出现错误时如何更改点击功能

问题描述

我想第一次单击以使 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>

标签： javascripthtml

解决方案

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

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

你也没有分配任何东西给x

但是我建议你这样做：

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

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>

推荐阅读