2 dice random function with 2 clickable boxes problem.

Page 1 of 1

1 Replies - 625 Views - Last Post: 04 October 2012 - 06:15 PM

#1 woodsmc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 04-October 12

2 dice random function with 2 clickable boxes problem.

Posted 04 October 2012 - 04:50 PM 

<html>
 <head>
   <title> Die Rolls </title>
   <script type="text/javascript">
     function SelectImage()
     // Assumes: die images are in balance3e.com/Images
     // Results: displays a randomly selected image for 2 6-sided die
     {
       roll=Math.floor(Math.random()*6) + 1;Math.floor(Math.random()*6) + 1;
       imgName='http://balance3e.com/Images/die' + roll + '.gif';
       document.getElementById('dieImg').src = imgName;
     }
   </script>
 </head>

 <body>
   <div style="text-align:center"> 
     <p>
       <img id="dieImg" alt="die image"
            src="http://balance3e.com/Images/die1.gif">
     </p>
     <input type="button" value="Click to Roll" onclick="SelectImage();">
    <img id="dieImg" src="http://balance3e.com/Images/die1.gif">
        <input type="button" value="Click to Roll" onclick="SelectImage();">
   
   </div>
 </body>
</html>

Need to make both dice roll when i click each button confused on how to make this work.

This post has been edited by Dormilich: 04 October 2012 - 10:51 PM
Reason for edit:: fixed code tags


Is This A Good Question/Topic? 0
  • +

Replies To: 2 dice random function with 2 clickable boxes problem.

#2 JMRKER  Icon User is online

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 751
  • Joined: 25-October 08

Re: 2 dice random function with 2 clickable boxes problem.

Posted 04 October 2012 - 06:15 PM

Trying to keep your code as much as possible, this is one of many solutions...
<html>
<head>
<title> Die Rolls </title>
<script type="text/javascript">
function SelectImage(die) {
// Assumes: die images are in balance3e.com/Images
// Results: displays a randomly selected image for 2 6-sided die
  roll=Math.floor(Math.random()*6) + 1;  // Math.floor(Math.random()*6) + 1;
  imgName='http://balance3e.com/Images/die' + roll + '.gif';
  document.getElementById('dieImg'+die).src = imgName;
}
</script>
</head>

<body>
<div style="text-align:center">
<input type="button" value="Click to Roll" onclick="SelectImage(1);">
<p> <img id="dieImg1" alt="die image" src="http://balance3e.com/Images/die1.gif"> </p>
<input type="button" value="Click to Roll" onclick="SelectImage(2);">
<p> <img id="dieImg2" src="http://balance3e.com/Images/die1.gif"> </p>
<input type="button" value="Click to Roll BOTH" onclick="SelectImage(1);SelectImage(2);">

</div>
</body>
</html>

Primary problem with your original code is that ID values must be unique.

:bananaman:

This post has been edited by JMRKER: 04 October 2012 - 06:16 PM

Was This Post Helpful? 1
  • +
  • -
Page 1 of 1