setTimeOut für Button klickt in Javascript

-2

Ich versuche es so zu machen, dass der Benutzer eine Zahltaste nicht drücken kann, bis die Starttaste gedrückt wird. Ich habe w3schools und andere Seiten durchsucht, kann aber keine Lösung finden. Jede Hilfe wäre willkommen, auch wenn Sie mich auf eine Website verweisen können. Mein Instructor hat die Nutzung informiert, dass wir online nach Lösungen für unsere Probleme suchen müssen. Selbst Vorschläge für ein gutes Javascript-Buch wären hilfreich, da es für die Klasse kein Lehrbuch gibt und er es nicht unterrichtet.setTimeOut für Button klickt in 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>

Quelle

2017-09-16 DonB

Dies ist nicht zu Ihrer Frage, aber beachten Sie, dass Ihre 'random()' Funktion eine ganze Zahl im Bereich von 25 bis 74 (75) inklusive zurück. Dies liegt daran, dass 'Math.random()' einen Wert kleiner oder gleich 0 und _less als_ 1 zurückgibt. Sie verwenden hier korrekt 'Math.floor()', berücksichtigen Sie dies bei Bedarf. –

Anstatt ein Timeout-Intervall zu verwenden, zeigen Sie nur eine Fehlermeldung, wenn eine Taste vor der Start-Taste gedrückt wird? –

Sie für diese versuchen kann,

ich es auf meinem Ende getestet haben, siehe unten,

ich verwende nur isStart boolean Variable zu überprüfen ist, Spiel starten oder nicht.

<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>

Quelle

2017-09-16 04:12:56

Danke das scheint an meinem Ende zu funktionieren. Jetzt muss ich am Timer-Teil arbeiten. – DonB

aber davor mögen und meine Antwort aufheben. –

setTimeOut für Button klickt in Javascript

Antwort

Verwandte Themen