Question

这是一个简单的骰子投掷事件，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>

Answer 1

那是因为您要将执行rollDice(results)的结果分配给clickButton.onclick功能。单击该元素时，您没有告诉它执行该函数。为避免这种情况，请将其包装在函数调用本身中：

clickButton.onclick = function() { rollDice(results); }

现在，您的点击将执行该功能，然后只执行rollDice功能。

扩展这里发生的事情。假设我们有一个函数foo，它返回字符串"bar"：

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"

触发onclick事件而不点击

1 个答案: