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

您不应该在分配时调用函数，您应该绑定调用。

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

或使用ES6

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

https://jsfiddle.net/hfsr0bso/

Answer 2

您正在执行您的函数并将结果分配给事件处理程序undefined。所有你需要从给定函数返回一个函数，如。此外，我的代码中有一些变化，看起来更好（我认为:)）。

我已经评论了该示例的属性赋值。在您的代码中，您可以打开它们。

＆＃13;

const level = function(lvl) {

   function setProperties(width, height, c, r, n) {
      //ctx.canvas.width = width;
      //ctx.canvas.height = height;
      //cols = c;
      //rows = r;
      //numbombs = n;
      console.log(`Called ${lvl}`);
   }

   return function() {
      switch(lvl) {
          case 1:
             setProperties(400, 400, 9, 9, 10);
             break;
          case 2:
             setProperties(490, 490, 13, 13, 30);
             break;
          case 3:
             setProperties(1050, 490, 30, 14, 99);
             break;
      }
   };
}

document.getElementById("one").onclick = level(1);
document.getElementById("two").onclick = level(2);
document.getElementById("three").onclick = level(3);

＆＃13;

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

＆＃13;

Answer 3

You must add function after "=" this is mistake in your code.
    document.getElementById("one").onclick = function(){
        level(1);
    }
    document.getElementById("two").onclick = function(){
    level(2);
    }
    document.getElementById("three").onclick = function(){
    level(3);
    }

Answer 4

你只需要利用一个闭包。

const level = function(lvl) {
  return function() {
  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;
  }         
  };
};

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

4 个答案: