2017-08-10 12 views
0

plnkr.coにエラーはありませんが、divボタンはまだ動作しません。JavaScript 2つの配列を使って「ポイント」を生成するクラップスゲーム

1)2つの配列から2つの乱数を引いて、それらを追加し、ボタンをクリックしたときに結果を返す正しい軌道にいるかどうかを確認します。 2)ここでコードを実行したときに未定義のエラーが発生しましたが、トラブルシューティングの対象がわかりません。このコードではplnkr.coにエラーはありませんでした。

//button event will generate 2 random numbers and add them together 
 

 
var num1 = [1,2,3,4,5,6]; 
 
var num2 = [1,2,3,4,5,6]; 
 
//var sum1 = [2,3,4,5,6,7,8,9,10,11,12] 
 
//var sum2 = num1 + num2 
 

 
function rollDice(){ 
 
\t var \t randomNumber = Math.floor(Math.random()*(num1 + num2)); 
 
\t document.getElementById("roll").innerHTML = randomNumber[rollDice]; 
 
\t }
body { 
 
    background-color: darkred; 
 
} 
 

 
h1 { 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    color: white; 
 
    font-family: verdana; 
 
    font-size: 20px; 
 
}
<!DOCTYPE html> 
 
<html lang="en-US"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>JavaScript Craps using arrays</title> 
 
\t <link rel="stylesheet" href="random.css"> 
 
\t <script src="craps.js"></script> 
 
\t 
 
</head> 
 
<body> 
 
<h1> Craps Lounge</h1> 
 

 
<div id="button"> 
 
<button onclick="randomNumber()">Roll the Bones</button> 
 
</div> 
 

 
<p id="roll"></p> 
 

 
</body> 
 
</html>

答えて

0

あなたのコードを持ついくつかの問題:

  • あなたが実際にrollDice()関数を呼び出す必要があります。

  • このようなrandomNumberを見つけることができない場合は、定義した2つの配列から2つの数字を選択するために2つのランダムなインデックスが必要です。以下のコードのようにMath.random()を使用することができます。

  • randomNumber[rollDice]はrandomNumberが数字でありオブジェクトではないので間違っています。

//button event will generate 2 random numbers and add them together 
 

 
var num1 = [1,2,3,4,5,6]; 
 
var num2 = [1,2,3,4,5,6]; 
 
//var sum1 = [2,3,4,5,6,7,8,9,10,11,12] 
 
//var sum2 = num1 + num2 
 

 
function rollDice(){ 
 
    var randomIndex1 = Math.floor(Math.random()*num1.length); 
 
    var randomIndex2 = Math.floor(Math.random()*num2.length); 
 
\t var \t randomNumber = num1[randomIndex1] + num2[randomIndex2]; 
 
\t document.getElementById("roll").innerHTML = randomNumber; 
 
\t }
body { 
 
    background-color: darkred; 
 
} 
 

 
h1 { 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    color: white; 
 
    font-family: verdana; 
 
    font-size: 20px; 
 
}
<!DOCTYPE html> 
 
<html lang="en-US"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>JavaScript Craps using arrays</title> 
 
\t <link rel="stylesheet" href="random.css"> 
 
\t <script src="craps.js"></script> 
 
\t 
 
</head> 
 
<body> 
 
<h1> Craps Lounge</h1> 
 

 
<div id="button"> 
 
<button onclick="rollDice()">Roll the Bones</button> 
 
</div> 
 

 
<p id="roll"></p> 
 

 
</body> 
 
</html>

+0

前コード: VAR \t乱数= Math.floor(Math.random()*(NUM1 + NUM2))。 ランダムに生成された数値を切り捨てる変数を作成しようとしていました。私の前提は、関数が2つの別々の配列を追加してインデックスを付け、それらを追加するということでした。 – liquidsolomon

+0

新しいコード: var randomIndex1 = Math.floor(Math.random()* num1.length); var randomIndex2 = Math.floor(Math.random()* num2.length); var \t randomNumber = num1 [randomIndex1] + num2 [randomIndex2]; 各配列を同じ関数内に別々にインデックスし、lengthプロパティを使用して配列内の項目数を参照します。これらの2つの結果を一緒に追加するための別の変数が作成されました。 – liquidsolomon

+0

前のHTML <ボタンのonclick = "乱数()">ロールボーンズ 新しいHTML <ボタンのonclick = "rollDice()"> 前のHTMLは、変数を呼んでいた骨をロールバックします。新しいHTMLが関数(オブジェクト)を呼び出しています。 時間をとっていただきありがとうございます! – liquidsolomon

0

私はいくつかのことを見ました。私はあなたが達成しようとしていたと信じているものにリファクタリングしました。

//button event will generate 2 random numbers and add them together 
 

 
var num1 = [1, 2, 3, 4, 5, 6]; 
 
var num2 = [1, 2, 3, 4, 5, 6]; 
 
//var sum1 = [2,3,4,5,6,7,8,9,10,11,12] 
 
//var sum2 = num1 + num2 
 

 
function rollDice() { 
 
    
 
    //random # between 1 and 6 
 
    var dice1 = Math.floor((Math.random() * num1.length) + 1); 
 
    var dice2 = Math.floor((Math.random() * num2.length) + 1); 
 
    
 
    var randomNumber = dice1 + dice2; 
 
    document.getElementById("roll").innerHTML = randomNumber; 
 
}
body { 
 
    background-color: darkred; 
 
} 
 

 
h1 { 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    color: white; 
 
    font-family: verdana; 
 
    font-size: 20px; 
 
}
<!DOCTYPE html> 
 
<html lang="en-US"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>JavaScript Craps using arrays</title> 
 
\t 
 
</head> 
 
<body> 
 
<h1> Craps Lounge</h1> 
 

 
<div id="button"> 
 
<button onclick="rollDice()">Roll the Bones</button> 
 
</div> 
 

 
<p id="roll"></p> 
 

 
</body> 
 
</html>

+0

私は最初の答えをうまく実装しました。私はあなたのステートメントに+1が含まれており、同じ結果を返すことがわかります。したがって、+ 1の無関係の? – liquidsolomon

+0

私はそれが単に答えが働いていると信じています。問題を解決するには、複数の手段が必要です。したがって、複数の正解が存在する可能性があります。 –

+0

ありがとうございます! – liquidsolomon

関連する問題