onclick 事件在不点击的情况下触发-前端问题

onclick event is triggered without clicking(onclick 事件在不点击的情况下触发)

本文介绍了onclick 事件在不点击的情况下触发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是一个简单的掷骰子事件，6 个骰子，由随机数生成，一切正常，我在控制台中获取数据但我希望它仅在单击按钮时触发.

This is a simple dice throwing event, 6 dice, generated by a random number, everything works, I'm getting the data in the console but I want it triggered only when clicking on the button.

在这段代码中，onclick 事件被触发(在控制台中)而我没有点击，我该如何解决这个问题?

in this code the onclick event is triggered (in the console) without me clicking, how can I fix that?

<!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) 的 result 分配给你的 clickButton.onclick 函数.单击元素时，您不会告诉它执行该功能.为避免这种情况，请将其包装在函数调用本身中:

That's because you're assigning the result of executing rollDice(results) to your clickButton.onclick function. You're not telling it to execute that function when the element is clicked. To avoid this, wrap that in a function call itself:

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

现在您的点击将执行该函数，然后该函数才执行 rollDice 函数.

Now your click will execute that function which only then executes the rollDice function.

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

To expand on what's happening here. Let's say we have a function foo which returns the string "bar":

function foo() { return "bar"; }

如果我们要将 foo() 分配给一个新变量，JavaScript 将在那里执行 foo 函数，然后将该函数的结果分配给我们的新变量变量:

If we're to assign foo() to a new variable, JavaScript will execute the foo function there and then and assign the result of that function to our new variable:

var baz = foo();
-> "bar"

但是，如果我们将 foo() 函数调用放在另一个函数调用中，我们的原始函数将不会立即执行:

However if we place our foo() function call within another function call, our original function will not be immediately executed:

var baz = function() { return foo(); }
-> function() { return foo(); }

如果我们现在调用 baz()，它将执行它自己的函数，该函数本身执行我们原来的 foo 函数:

If we now call baz(), it will execute its own function which itself executes our original foo function:

baz();
-> "bar"

这同样适用于您的 onclick 函数.我们不是告诉 onclick 在点击元素时执行我们的函数，而是将 "bar" 分配给我们的 onclick 函数:

The same applies with your onclick function. Rather than telling the onclick to execute our function when the element is clicked, we're assigning "bar" to our onclick function: