javascriptのボタンクリップのsetTimeOut

-2

私は、開始ボタンが押されるまで数字ボタンを押すことができないようにしようとしています。私はw3schoolsや他のサイトを検索しましたが、解決策を見つけることはできません。あなたが私をウェブサイトに導くことができたとしても、どんな助けもありがたいです。私のインストラクターは、オンラインで問題を解決する必要があることを知っています。クラスのテキストブックがなく、彼はそれを教えていないので、良いjavascriptの本のための提案さえも役に立ちます。javascriptのボタンクリップのsetTimeOut

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

出典

2017-09-16 DonB

これは、あなたの質問に関連していないですが、あなたの '乱数（）'関数は〜74 25の範囲の整数（いない75）包括的を返すことに注意してください。これは、 'Math.random（）'が0より小さい値と_less_1より小さい値を返すからです。ここで 'Math.floor（）'を使用するのは間違いありません。 –

タイムアウト間隔を使用する代わりに、開始ボタンの前にキーが押された場合にエラーメッセージを表示するのはどうですか？ –

私はちょうどチェックしisStartブール変数を使用

、以下を参照してください、私は私の側でそれをテストしている、このため

を試みることは、ゲーム開始であるかどうか。

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

出典

2017-09-16 04:12:56

ありがとうございました。今私はタイマーの部分で作業する必要があります。 – DonB

しかし、その前に私の答えを投票してください。 –

javascriptのボタンクリップのsetTimeOut

答えて

関連する問題