这是一个简单的掷骰子事件，6 个骰子，由随机数生成，一切正常，我正在控制台中获取数据，但我希望它仅在单击按钮时触发。
在这段代码中，onclick 事件在我没有点击的情况下被触发(在控制台中)，我该如何解决这个问题？
<!doctype html>
<html lang="eng">
<head>
<meta charset="utf-8" />
<title>Yahtzee Project OOP</title>
<link href= rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Dice Project</h1>
<button id="rollButton">ROLL CLICK HERE</button>
<script>
var results = [
{rollCounter: 0},
{dieNumber: 1, rollResult: 'NULL', check: 'NULL'},
{dieNumber: 2, rollResult: 'NULL', check: 'NULL'},
{dieNumber: 3, rollResult: 'NULL', check: 'NULL'},
{dieNumber: 4, rollResult: 'NULL', check: 'NULL'},
{dieNumber: 5, rollResult: 'NULL', check: 'NULL'}
];
var clickButton = document.getElementById('rollButton');
function print(message){
document.write(message);
}
function randomRoll(){
return Math.floor(Math.random() * (6 - 1 + 1)) + 1;
}
function rollDice(results){
for (var i=1; i<6; i++){
results[i].rollResult = randomRoll();
}
console.log(results);
return results;
}
clickButton.onclick = rollDice(results);
</script>
</body></html>最佳答案
那是因为您将执行 rollDice(results) 的结果分配给您的 clickButton.onclick 函数。您并没有告诉它在单击元素时执行该功能。为避免这种情况，请将其包装在函数调用本身中:
clickButton.onclick = function() { rollDice(results); }
现在您的点击将执行该函数，该函数只会执行 rollDice 函数。
扩展这里发生的事情。假设我们有一个返回字符串 "bar" 的函数 foo:
function foo() { return "bar"; }
如果我们要将 foo() 分配给一个新变量，JavaScript 将在那里执行 foo 函数，然后将该函数的结果分配给我们的新变量变量:
var baz = foo();
-> "bar"
但是如果我们将我们的 foo() 函数调用放在另一个函数调用中，我们原来的函数将不会立即执行:
var baz = function() { return foo(); }
-> function() { return foo(); }
如果我们现在调用 baz()，它将执行自己的函数，该函数本身会执行我们原来的 foo 函数:
baz();
-> "bar"
这同样适用于您的 onclick 函数。我们不是告诉 onclick 在单击元素时执行我们的函数，而是将 “bar” 分配给我们的 onclick 函数:
elem.onclick = foo();
-> "bar"
关于javascript - 没有点击就触发了onclick事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32742543/