[英]How to make my button display two different images once clicked?
我有两个骰子,在主页上它们是默认的骰子面,但是一旦单击“投掷”按钮,则两个图像将随机更改为两个随机骰子数。 这些数字已添加并显示在我的“总计” div中。 我该如何在javascript中做到这一点? 我还有一个“清除”按钮,选中该按钮后,它将返回两个默认骰子面,并将结果从总div中清除为0。
这是我的html:
<head>
<link rel="stylesheet" type="text/css" href="dice.css">
<title> Dice </title>
<script type="text/javascript">
var num1 = Math.floor(Math.random() * 6) + 1;
var num2 = Math.floor(Math.random() * 6) + 1;
var imgtag1 = "<img src=\"die" + num1 + ".gif\">";
var imgtag2 = "<img src=\"die" + num2 + ".gif\">";
var score = num1 + num2;
</script>
</head>
<body>
<h1> Dice </h1>
<div id="green">
<img src="die-default.gif" class="die1" /><img src="die-default.gif" class="die2" />
</div>
<button type="button" class="throw" onclick="myScript">Throw</button>
<button type="button" class="clear">Clear</button>
<h2>Total</h2>
<div id="total">
<script>
document.write(score1);
</script>
</div>
</body>
这是我的CSS:
body{
background-color: black;
color: white;
text-align: center;
font-size: 30px;
font-family: arial;
}
#green {
background-color: #0B610B;
height: 200px;
width: 550px;
border-radius: 25px;
position: relative;
left: 480px;
}
.die1{
float: left;
margin-top: 12px;
margin-left: 70px;
}
.die2{
float: right;
margin-top: 12px;
margin-right: 70px;
}
.throw {
margin-top: 100px;
font-size: 40px;
border-radius: 10px;
height: 70px;
width: 200px;
text-align: center;
background-color: white;
}
.clear {
margin-top: 100px;
font-size: 40px;
border-radius: 10px;
height: 70px;
width: 200px;
text-align: center;
background-color: white;
}
h2{
font-size: 30px;
text-align: center;
margin-top: 40px;
font-family: arial;
}
#total {
background-color: white;
height: 70px;
width: 300px;
border-radius: 10px;
position: relative;
left: 600px;
}
我有骰子的6张面孔的图像加上带有问号的骰子面孔的默认骰子图像。 我所有的图像都命名为die1.gif-die6.gif,默认名称为die-default.gif
首先,您需要为每个img标签分配一个ID:
<img src="die-default.gif" id="die1" class="die1" />
<img src="die-default.gif" id="die2" class="die2" />
对于“投掷”按钮:投掷
最后,您的myScript函数:
function myScript() {
var num1 = Math.floor(Math.random() * 6) + 1;
var num2 = Math.floor(Math.random() * 6) + 1;
d1 = document.getElementById("die1");
d2 = document.getElementById("die2");
d1.src = "die" + num1 + ".gif";
d2.src = "die" + num2 + ".gif";
var score = num1 + num2;
}
无需JQuery即可更改img标记的src。
看来您可能忘记了声明函数,然后在html中正确调用它。
您可以这样声明函数:
function myfunction(){
var num1 = Math.floor(Math.random() * 6) + 1;
var num2 = Math.floor(Math.random() * 6) + 1;
var imgtag1 = "<img src=\"die" + num1 + ".gif\">";
var imgtag2 = "<img src=\"die" + num2 + ".gif\">";
var score = num1 + num2;
};
像这样调用函数:
<button type="button" class="throw" onclick="myfunction();">Throw</button>
编辑:
<button onclick="myFunction()">click it</button>
<script>
var myFunction = function (){
var num1 = Math.floor(Math.random() * 6) + 1;
var num2 = Math.floor(Math.random() * 6) + 1;
var imgtag1 = "<img src=\"die" + num1 + ".gif\">";
var imgtag2 = "<img src=\"die" + num2 + ".gif\">";
var score = num1 + num2;
console.log(score);
};
</script>
将第二个代码段放入html页面,首先打开chrome控制台,然后您可以查看是否使用
console.log();
功能。 如果您每次单击该按钮都看到生成的数字,则表示您的乐谱有效,您可以通过这种方式将您在脚本中声明的任何数字输出到控制台。
一旦您在那里并且生成了随机数,只需将num1和num2放入图像的src中,对于该以太我的答案或发布的其他答案将起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.