javascript - 通过不同的按钮调用具有不同参数的函数 - JavaScript

Question

我想调用带有参数 1、2 或 3 的 level(lvl) 函数，这些参数分别与 ID 为 1、2 和 3 的按钮一起传递。然而，每当页面加载时，第三个选项已经在没有任何点击的情况下执行。我错过了什么，这不是正确的方法吗？这是 javascript代码。

const level = function(lvl) {

if(lvl === 1) {
  ctx.canvas.width = 400;
  ctx.canvas.height = 400;
  cols = 9;
  rows = 9;
  numbombs = 10;
  console.log("called 1");
  return;
}
if(lvl === 2) {
  ctx.canvas.width = 490;
  ctx.canvas.height = 490;
  cols = 13;
  rows = 13;
  numbombs = 30;
  console.log("called 2");
  return;
}
if(lvl === 3) {
  ctx.canvas.width = 1050;
  ctx.canvas.height = 490;
  cols = 30;
  rows = 14;
  numbombs = 99;
  console.log("called 3");
  return;
}         
};


document.getElementById("one").onclick = level(1);
document.getElementById("two").onclick = level(2);
document.getElementById("three").onclick = level(3);

还有html部分

<button id="one" class="lvl">Beginner</button>
<button id="two" class="lvl">Intermediate</button>
<button id="three" class="lvl">Advanced</button>

Answer 1

你不应该在赋值时调用函数，你应该绑定(bind)调用。

document.getElementById("one").onclick = level.bind(null, 1);

或者使用 ES6

document.getElementById("one").onclick = () => level(1);

https://jsfiddle.net/hfsr0bso/