How to make my button display two different images once clicked?
Question
I have two dies, on the main page they are default dice faces, but once the 'throw' button is clicked the two images are randomly changed to two random dice numbers. The numbers are added and displayed in my 'total' div. How to I make this happen in javascript? I also have a 'clear' button, that once selected, it returns the two default dice faces and clears the result from the total div back to 0.
heres my 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>
here is my 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;
}
I have images of the 6 faces of a dice plus the default dice image of a dice face with a question mark. All my images are named die1.gif - die6.gif and my default in die-default.gif
2 answers
solution1
1 2014-11-03 18:06:12
First, you'll need to assign an ID to each of your img tags:
<img src="die-default.gif" id="die1" class="die1" />
<img src="die-default.gif" id="die2" class="die2" />
For your Throw button: Throw
Lastly, your myScript function:
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;
}
Changing the src of your img tag is done without JQuery.
solution2
1 ACCPTED 2014-11-03 18:16:20
It looks like you may have forgotten to declare your function and then call it correctly in the html.
You would declare the function like this:
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;
};
Call the function like this:
<button type="button" class="throw" onclick="myfunction();">Throw</button>
edit:
<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>
Drop the second snippet into your html page, start by opening up the console in chrome, and you can see if the random numbers are being output to the console with the
console.log();
function. If you see the number generating each time you click the button that means that your score is working you can output any of the numbers you have declared in your script to the console in that way.
Once you are there and the random numbers are being generated, it's just a matter of getting the num1 and num2 into the src of the images, and for that ether my answer or the other answer that was posted will work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.