Javascript Dice

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

这段代码看起来很糟糕，确保你总是 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/

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/

最后你有一个额外的变量

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

您在最后else上有一个额外的var

并且为了你希望展示其他骰子，我将继续克里斯蒂伟大的实现。

在按钮下添加一个 Enptydiv：

<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">';
}

你可以

这样做：

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

并在标记中

在按钮之前：

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

in dicee.html

<body onload="getRandom()">

在索引中.js

2 种方法：

简单的一个（使用直接src）;

function getRandom(){
  var randomNumber1 = Math.floor(Math.random() * 6) + 1;
  var randomNumber2 = Math.floor(Math.random() * 6) + 1;
  document.querySelector(".img1").src="images/dice"+randomNumber1+".png";
  document.querySelector(".img2").src="images/dice"+randomNumber2+".png";
}

根据问题（使用 setAttribute）

function getRandom(){
  var randomNumber1 = Math.floor(Math.random() * 6) + 1;
  var randomNumber2 = Math.floor(Math.random() * 6) + 1;
 document.querySelector(".img1").setAttribute("src","images/dice"+randomNumber1+".png");
 document.querySelector(".img2").setAttribute("src","images/dice"+randomNumber2+".png");
}

相关内容

最新更新

热门标签：