javascript - Javascript サイコロ

Question

サイコロの画像を表示したいのですが、出力はありませんか? どうしたの？1 から 6 までの乱数を選択すると、サイコロの面が表示されます。当然のことですが、機能していません。また、ボタンを置き換えるのではなく、別の場所に画像を表示したいと考えています。どうやってそれをしますか？

<html>
<head><title>DiceBoy</title>
</head>
<body>
<script>
function getRandom(){
var RandomNumber1 = Math.floor(Math.random() * 6) + 1;
var RandomNumber2 = Math.floor(Math.random() * 6) + 1;
  if(RandomNumber1 == 1) document.write('<img src="dice1.png">');
  else if(RandomNumber1 == 2)  document.write('<img src="dice2.png">');
  else if(RandomNumber1 == 3)  document.write('<img src="dice3.png">');
    else if(RandomNumber1 == 4)  document.write('<img src="dice4.png">');
      else if(RandomNumber1 == 5)  document.write('<img src="dice5.png">');

                  else var  document.write('<img src="dice6.png">');


}

</script>
<input type="button" value="Throw Dices" onClick="getRandom();">

score 6 · Accepted Answer

このコードはひどいように見えます。常にコードを乾かしてください。

function getRandom(){
     var RandomNumber1 = Math.floor(Math.random() * 6) + 1;
     var RandomNumber2 = Math.floor(Math.random() * 6) + 1;

     document.getElementById('result').innerHTML = '<img src="dice' + RandomNumber1 + '.png">';
     document.getElementById('result').innerHTML += '<img src="dice' + RandomNumber2 + '.png">';
}

http://jsfiddle.net/tzrGh/4/

score 2 · Accepted Answer

それvarは不要です。それを削除すると動作します。

http://jsfiddle.net/rRhqn/

次回は、Javascript コンソール (たとえば、Chrome では Ctrl+Shift+J) を開き、表示されるエラーを読みます。

ドキュメントをより細かく制御するにdocument.writeは、ドキュメントオブジェクトモデルを削除して使用します。

この関数を見てください：

function writeDice(n) {
    var img = document.createElement('img');
    img.src = 'dice'+n+'.png';
    document.getElementById('dice_container').appendChild(img);
}

img要素を作成srcし、パラメーターに応じて設定し、ID を持つ要素に追加しますdice_container。

HTML で、画像を表示する場所にこの ID を設定します。

デモ: http://jsfiddle.net/REPAe/

score 1 · Accepted Answer

var最後に余分なものがありますelse

そして、私がクリスティの素晴らしい実装を続けるサイコロを他の場所に見せたいというあなたの願いのために.

ボタンの下に空の div を追加します。

<input type="button" value="Throw Dices" onClick="getRandom();">
<div id="diceImage1"> </div>
<div id="diceImage2"> </div>

次に、この関数を使用します。

function getRandom(){
  var RandomNumber1 = Math.floor(Math.random() * 6) + 1;
  var RandomNumber2 = Math.floor(Math.random() * 6) + 1;

  document.getElementById("diceImage1").innerHTML = '<img src="dice' + RandomNumber1 + '.png">';
  document.getElementById("diceImage2").innerHTML = '<img src="dice' + RandomNumber2 + '.png">';
}

score 1 · Accepted Answer

最後に余分な変数があります

else document.write('<img src="dice6.png">'); //removed the var

score 0 · Accepted Answer

あなたはこのようにすることができます：

function getRandom(){
  var RandomNumber1 = Math.floor(Math.random() * 6) + 1;
  document.getElementById("showImage").innerHTML='<img src="dice' + RandomNumber1 + '.png">';
}

そしてマークアップで

ボタンの前に：

<div id="showImage"></div>

javascript - Javascript サイコロ

5 に答える 5

Related

Reference