異なるボタンを使用して異なる引数で関数を呼び出す - JavaScript

Question

level(lvl)引数1,2または3を使用して関数に呼び出す場合は、それぞれidが1,2,3のボタンで渡されます。ただし、ページが読み込まれるたびに、クリックせずに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

あなたの関数を実行し、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>

Answer 2

あなたは割り当ての関数を呼び出すべきではありません、あなたはコールをバインドする必要があります。

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

またはES6

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

https://jsfiddle.net/hfsr0bso/

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