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

【问题标题】：Calling a function with different arguments through different buttons- JavaScript通过不同的按钮调用具有不同参数的函数 - JavaScript
【发布时间】：2017-12-13 18:00:04
【问题描述】：

我想调用带有参数 1、2 或 3 的 level(lvl) 函数，并通过 ID 为 1、2 和 3 的相应按钮传递。但是，每当页面加载时，第三个选项已经执行，无需任何点击。我错过了什么，这不是正确的方法吗？这是javascriptcode。

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>

【问题讨论】：

标签： javascript html button onclick

【解决方案1】：

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

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

或使用 ES6

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

https://jsfiddle.net/hfsr0bso/

【讨论】：

【解决方案2】：

您正在执行您的函数并将结果分配给事件处理程序undefined。从给定函数返回函数所需的所有内容，例如。此外，我在您的代码中进行了一些更改，以使其看起来更好（我认为 :)）。

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

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

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

【讨论】：

感谢您的帮助。 Շնորհակալեմ) 但是，document.getElementById("one").onclick = level(1); document.getElementById("two").onclick = level(2); document.getElementById("three").onclick = level(3);这会一个接一个地调用它们，所以它最终只在第 3 级执行
除此之外它工作得很好。知道如何使其仅在单击时起作用吗？
不太了解你。 - 所以它最终只在第 3 级执行 - 这是什么意思？所以它只有在点击后才能工作。调用level(1) 只是返回另一个单击即可工作的函数
我的意思是我看到控制台打印了“Called 1”、“Called 2”、“Called 3”，并且游戏的属性设置为级别 3。因此，我猜，该函数被调用了 3 次，最终结果是第 3 级的执行，因为它在最后
这一切都是在我没有点击任何东西的情况下发生的

【解决方案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);
    }

【讨论】：

【解决方案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;
  }         
  };
};

【讨论】：