onclick事件在未点击的情况下被触发

Question

onclick事件在未点击的情况下被触发

4

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

- jayNorth

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Donnelly · Accepted Answer

这是因为你正在将执行 rollDice(results) 的结果分配给你的 clickButton.onclick 函数，而不是告诉它在元素被点击时执行该函数。为了避免这种情况，将其包装在一个函数调用中：

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

现在你的点击将执行该函数，该函数只有在执行 rollDice 函数时才会生效。

更详细地解释一下正在发生的事情。假设我们有一个返回字符串 "bar" 的函数 foo：

function foo() { return "bar"; }

如果我们将foo()赋值给一个新变量，JavaScript会立即执行foo函数，并将该函数的结果分配给我们的新变量：

如果我们把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"