Событие onclick запускается без нажатия

Это простое событие бросания кубиков, 6 кубиков, генерируемых случайным числом, все работает, я получаю данные в консоли, но я хочу, чтобы он срабатывал только при нажатии на кнопку.Событие onclick запускается без нажатия

в этом коде запускается событие 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 > 
 
\t 
 
var results = [ 
 
{ \t rollCounter: 0}, 
 
{ \t dieNumber: 1, rollResult: 'NULL', check: 'NULL'}, 
 
{ \t dieNumber: 2, rollResult: 'NULL', check: 'NULL'}, 
 
{ \t dieNumber: 3, rollResult: 'NULL', check: 'NULL'}, 
 
{ \t dieNumber: 4, rollResult: 'NULL', check: 'NULL'}, 
 
{ \t dieNumber: 5, rollResult: 'NULL', check: 'NULL'} 
 
]; 
 

 
var clickButton = document.getElementById('rollButton'); 
 

 

 
function print(message){ 
 
\t document.write(message); 
 
} 
 

 
function randomRoll(){ 
 
\t return Math.floor(Math.random() * (6 - 1 + 1)) + 1; 
 
} 
 

 
function rollDice(results){ 
 
\t for (var i=1; i<6; i++){ 
 
\t \t results[i].rollResult = randomRoll(); 
 
\t } 
 
\t console.log(results); 
 
\t return results; 
 
} 
 

 
clickButton.onclick = rollDice(results); 
 

 
</script> 
 
</body></html>

источник

2015-09-23 jayNorth

Это потому, что вы назначая результат от выполнения 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"

источник

2015-09-23 14:43:13

Спасибо Джеймс, это работает, но я не совсем понимаю, почему. Мне нужно немного поиграть – jayNorth

@jayNorth Я обновил свой ответ. Дайте мне знать, если это станет более ясным. :) –

извините, но меня еще больше смущает, примеры foo bar никогда не имеют для меня никакого смысла. Позволь мне спать на нем, и он может утонуть. – jayNorth

Событие onclick запускается без нажатия

ответ

Смежные вопросы