2017-10-22 15 views
1

私は現在、JavaScriptの第一段階を学んでいます。私が達成しようとしているのは、ロールダイスボタンとダイスをクリックして1と6の間の数字を表示することです。私はそれを働かせていますが、最初のクリック後は動作させることができません。私は関数などでループを試した。私は非常に愚かな質問の男なら、ごめんなさい、JavaScriptにはとても新しい。あなたは1つのランダムあなたがボタンをクリックするごとに時間を生成する必要が:)クリックで再利用可能な関数javascript

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Learn Javascript</title> 
 
\t <meta charset="utf-8"> 
 
\t <style type="text/css"> 
 
\t \t body {font-family: sans-serif; margin:0; padding:0; background-color:#ddd; } 
 
\t \t #holder {margin:0 auto; width:150px; text-align:center;} 
 

 
\t \t #number { margin:0 auto; height:100px; width:100px; background-color: #fff; border-radius: 5px; text-align:center; 
 
\t \t \t display: flex; 
 
\t \t \t justify-content: center; 
 
\t \t \t align-items: center; 
 
\t \t \t flex-direction: column; 
 
\t \t \t border:1px solid black; 
 
\t \t \t font-family: arial; 
 
\t \t } 
 

 
\t \t input {margin:20px; width:75px; font-weight: bold;} 
 
\t </style> 
 
</head> 
 
<body> 
 
<h1>Javascript Dice Roll</h1> 
 

 
<div id="holder"> 
 
\t <div id="number"> 
 
\t \t <p id="diceNumber" style="font-size: 50px;">- -</p> 
 
\t </div> 
 

 
\t <input type="button" name="dice role" onclick="rollTheDice()" value="Roll Dice!"> 
 

 
</div> 
 

 

 
<script> 
 

 
\t var dice = Math.floor(Math.random() * 6) + 1; 
 

 
function rollTheDice(){ 
 

 
\t \t document.getElementById("diceNumber").innerHTML = dice; 
 
\t } 
 

 

 

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

答えて

2

function rollTheDice(){ 
 
    var dice = Math.floor(Math.random() * 6) + 1; 
 
    document.getElementById("diceNumber").innerHTML = dice; 
 
}
<h1>Javascript Dice Roll</h1> 
 

 
<div id="holder"> 
 
\t <div id="number"> 
 
\t \t <p id="diceNumber" style="font-size: 50px;">- -</p> 
 
\t </div> 
 

 
\t <input type="button" name="dice role" onclick="rollTheDice()" value="Roll Dice!"> 
 

 
</div>

+0

だから、基本的にVaRのサイコロ。それは自己の機能の中に書かれていますか?ありがとう、Alexandru。 :) –

+0

@AaronNewsum、はい。 –

関連する問題