Javascript骰子

时间:2013-01-31 10:05:10

标签: javascript html

我希望它显示骰子图像但没有输出?怎么了?我从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();">

5 个答案:

答案 0 :(得分:6)

此代码看起来很糟糕,请确保您始终使用DRY代码:

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/

答案 1 :(得分:2)

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/

答案 2 :(得分:1)

您在最后var

上有额外的else

并希望展示其他我将继续Cristy伟大实施的骰子。

在按钮下添加一个enpty 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">';
}

答案 3 :(得分:1)

你最后有一个额外的变量

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

答案 4 :(得分:0)

你可以这样做:

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

和标记

按钮之前

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