setTimeOut pour les clics de bouton en javascript

-2

J'essaie de faire en sorte que l'utilisateur ne puisse pas appuyer sur un bouton numérique avant d'appuyer sur le bouton de démarrage. J'ai cherché w3schools et d'autres sites, mais je ne trouve pas de solution. Toute aide serait appréciée, même si vous pouvez me diriger vers un site Web. Mon instructeur a informé l'utilisation que nous aurions besoin de trouver des solutions à nos problèmes en ligne. Même des suggestions pour un bon livre javascript seraient utiles car il n'y a pas de livre de texte pour la classe et il ne l'enseigne pas.setTimeOut pour les clics de bouton en javascript

<body> 
<h3 style="margin-left: 15px">This is Your TARGET:</h3> 
<div id="randomNum" class="display" style="margin-top: -20px; margin-bottom: 30px">0</div> 

<!-- Start button --> 
<button onclick="setTimeout(myFunction, 5000);">Start</button> 

<!-- Total value text --> 
<div id="text_total">0</div> 

<!-- Number buttons --> 
<div class="number_button" onclick="change_total(1)">1</div> 
<div class="number_button" onclick="change_total(2)">2</div> 
<div class="number_button" onclick="change_total(3)">3</div> 
<div class="number_button" onclick="change_total(4)" style="clear: left">4</div> 
<div class="number_button" onclick="change_total(5)">5</div> 
<div class="number_button" onclick="change_total(6)">6</div> 
<div class="number_button" onclick="change_total(7)" style="clear: left; margin-bottom: 30px">7</div> 
<div class="number_button" onclick="change_total(8)" style="margin-bottom: 30px">8</div> 
<div class="number_button" onclick="change_total(9)" style="margin-bottom: 30px">9</div> 

<h3 style="clear: left; margin-left: 58px">COUNTER!</h3> 
<div id="counter" class="display" style="clear: left; margin-top: -20px">0</div> 

<script> 
// Variables 
var total = 0; 
var target; 
var clicks = 0; 



window.onload = randomNumber(); 

// Functions 
function change_total(arg) { // This takes button input and changes the total value 
    total = total + arg; 
    clicks = clicks + 1; 
    update_total(); 
    if (total == target) { 
     alert("You win!"); // popup window with message 
     total = 0; // reset for next round 
     clicks = 0; // resets the click counter 
     randomNumber(); //gets new number for next round 
     update_total(); 
    }if (total > target) { 
     alert("BUSTED!!"); 
     total = 0; 
     clicks = 0; 
     randomNumber(); 
     update_total(); 
     } 
    update_clicks(); 
} 

function myFunction() { 
    alert("You failed to reach the target in time!"); 
} 

function update_total() { // Updates the text on the screen to show the current total 
    document.getElementById("text_total").innerHTML = total; 
} 

function randomNumber() { // returns a random number between 25 and 75 
    target = Math.floor(Math.random() * (50) + 25); 
    document.getElementById("randomNum").innerHTML = target; 
} 

function update_clicks() { // lets user know how many clicks 
    document.getElementById("counter").innerHTML = "You clicked the mouse " + clicks + " times."; 
} 

</script> 

</body>

Source

2017-09-16 DonB

Ce n'est pas lié à votre question, mais notez que votre fonction 'randomNumber()' retourne un entier dans la gamme de 25 à 74 (pas 75), y compris. Ceci est dû au fait que 'Math.random()' renvoie une valeur inférieure ou égale à 0 et _less than_ 1. Vous avez raison d'utiliser 'Math.floor()' ici, prenez cela en compte si vous en avez besoin. –

Au lieu d'utiliser un intervalle de délai, que diriez-vous juste d'afficher un message d'erreur si une touche est pressée avant le bouton de démarrage? –

Vous pouvez essayer pour cela,

Je l'ai testé sur ma fin, voir ci-dessous,

je viens d'utiliser la variable booléenne pour vérifier isStart est un jeu commence ou non.

<body> 
<h3 style="margin-left: 15px">This is Your TARGET:</h3> 
<div id="randomNum" class="display" style="margin-top: -20px; margin-bottom: 30px">0</div> 

<!-- Start button --> 
<button onclick="startGame()">Start</button> 

<!-- Total value text --> 
<div id="text_total">0</div> 

<!-- Number buttons --> 
<div class="number_button" onclick="change_total(1)">1</div> 
<div class="number_button" onclick="change_total(2)">2</div> 
<div class="number_button" onclick="change_total(3)">3</div> 
<div class="number_button" onclick="change_total(4)" style="clear: left">4</div> 
<div class="number_button" onclick="change_total(5)">5</div> 
<div class="number_button" onclick="change_total(6)">6</div> 
<div class="number_button" onclick="change_total(7)" style="clear: left; margin-bottom: 30px">7</div> 
<div class="number_button" onclick="change_total(8)" style="margin-bottom: 30px">8</div> 
<div class="number_button" onclick="change_total(9)" style="margin-bottom: 30px">9</div> 

<h3 style="clear: left; margin-left: 58px">COUNTER!</h3> 
<div id="counter" class="display" style="clear: left; margin-top: -20px">0</div> 

<script> 
// Variables 
var total = 0; 
var target; 
var clicks = 0; 



window.onload = randomNumber(); 
var isStart=false; 
// Functions 
function change_total(arg) { // This takes button input and changes the total value 
if(isStart){ 
    total = total + arg; 
    clicks = clicks + 1; 
    update_total(); 
    if (total == target) { 
     alert("You win!"); // popup window with message 
     total = 0; // reset for next round 
     clicks = 0; // resets the click counter 
     randomNumber(); //gets new number for next round 
     update_total(); 
     isStart=false; 
    }if (total > target) { 
     alert("BUSTED!!"); 
     total = 0; 
     clicks = 0; 
     randomNumber(); 
     update_total(); 
     isStart=false; 
     } 
    update_clicks(); 
    } 
    else{ 
    alert('please start the game'); 
    } 
} 

function myFunction() { 
    alert("You failed to reach the target in time!"); 
} 

function update_total() { // Updates the text on the screen to show the current total 
    document.getElementById("text_total").innerHTML = total; 
} 

function randomNumber() { // returns a random number between 25 and 75 
    target = Math.floor(Math.random() * (50) + 25); 
    document.getElementById("randomNum").innerHTML = target; 
} 

function update_clicks() { // lets user know how many clicks 
    document.getElementById("counter").innerHTML = "You clicked the mouse " + clicks + " times."; 
} 
function startGame(){ 
isStart=true; 
} 
</script> 

</body>

Source

2017-09-16 04:12:56

Merci qui semble fonctionner de mon côté. Maintenant, je dois travailler sur la partie minuterie. – DonB

mais avant cela, et votez pour ma réponse. –

setTimeOut pour les clics de bouton en javascript

Répondre

Questions connexes