ボタンをクリックするとJavaScriptダイスロール

Question

ボタンをクリックしたときに1から6までの乱数を表示するJavascriptで簡単なダイスローラーを作成しようとしています。このスクリプトでは

<button id="roll">Click to Roll</button> 

：：私はボタン持ち

function diceRoll(min, max) { 
    var min = Math.ceil(min); 
    var max = Math.floor(max); 
    var roll = Math.floor(Math.random() * (max - min + 1)) + min; 
    console.log(roll); 
} 

document.getElementById("roll").onclick = diceRoll(1, 6); 

を乱数は、ページが最初にロードされたときに表示するが、何も起こりません]ボタンをクリックするとします。ページが読み込まれたときではなく、ボタンがクリックされたときにこれをどのように動作させることができますか？ありがとうございました。

Answer 1

使用この代わりに：

document.getElementById("roll").onclick = function() { 
    diceRoll(1, 6); 
}; 

あなたの現在のコードの問題は、その行が実行されると、diceRoll(1, 6)が実行され、その後、その関数を呼び出した結果がonclickハンドラに割り当てられていることです。

代わりにonclickハンドラが、ボタンがクリックされるたびに呼び出される関数である必要があります。上に戻ると、呼び出されるとdiceRoll(1, 6)という新しい関数が作成されています。

それが助け場合

、このコードは、あなたが今やっていることと等価である（そして、できればそれは間違っている理由を明らかにする）：

// Call diceRoll and store its result (which is undefined, since 
// the function returns nothing). 
var result = diceRoll(1, 6); 

// Now take that result (undefined) and assign it to the button's 
// onclick handler. This makes onclick undefined too. 
document.getElementById("roll").onclick = result;