Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post

    Random Number Reset

    I am makeing a dice game and this is how i generate the numbers
    Code:
    var randomnumber1=Math.floor(Math.random()*13)
    But i have to relaode the page each time to randomize it again. How can i do this with out reloading the page? I am using a button to set the function of.
    Last edited by sherlockturtle; 07-25-2011 at 04:04 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by sherlockturtle View Post
    But i have to relaode the page each time to randomize it again. How can i do this with out reloading the page? I am using a button to set the function of.
    Why? Each time the function is called it will generate a different random number.

    Code:
    <script type = "text/javascript">
    function genrandy() {
    for (var i =0; i<20; i++){
    var randomnumber1 = Math.floor(Math.random()*13);  // generates 0-12
    document.write(randomnumber1 + " " );
    }
    }
    genrandy();
    </script>

    Quizmaster: King Edward VIII abdicated the throne in order to marry whom?
    Contestant: Anne Boleyn
    Last edited by Philip M; 07-25-2011 at 09:06 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    When i used it when i click a button to activiate it then the random number goes to a input box so i can read maby its the input box....
    Edit(also can it do this wihtout reloading the page???)

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Alternative attempt...

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function getRandomNumber() {
      return Math.floor(Math.random()*6)+1;
    }
    function RollDice() {
      document.getElementById('dice1').innerHTML = getRandomNumber();
      document.getElementById('dice2').innerHTML = getRandomNumber();
      document.getElementById('dice3').innerHTML = getRandomNumber();
      document.getElementById('dice4').innerHTML = getRandomNumber();
      document.getElementById('dice5').innerHTML = getRandomNumber();
    }
    window.onload = function() {
      RollDice();
    }
    </script>
    <style type="text/css">
    .dice { height:50; width:50; border:1px solid blue; }
    </style>
    
    </head>
    <body>
    <button onclick="RollDice()">Roll Dice</button>
    <p>
    <span class="dice" id="dice1"></span>
    <span class="dice" id="dice2"></span>
    <span class="dice" id="dice3"></span>
    <span class="dice" id="dice4"></span>
    <span class="dice" id="dice5"></span>
    <p>
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    sherlockturtle (07-25-2011)

  • #5
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    Quote Originally Posted by jmrker View Post
    Alternative attempt...

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function getRandomNumber() {
      return Math.floor(Math.random()*6)+1;
    }
    function RollDice() {
      document.getElementById('dice1').innerHTML = getRandomNumber();
      document.getElementById('dice2').innerHTML = getRandomNumber();
      document.getElementById('dice3').innerHTML = getRandomNumber();
      document.getElementById('dice4').innerHTML = getRandomNumber();
      document.getElementById('dice5').innerHTML = getRandomNumber();
    }
    window.onload = function() {
      RollDice();
    }
    </script>
    <style type="text/css">
    .dice { height:50; width:50; border:1px solid blue; }
    </style>
    
    </head>
    <body>
    <button onclick="RollDice()">Roll Dice</button>
    <p>
    <span class="dice" id="dice1"></span>
    <span class="dice" id="dice2"></span>
    <span class="dice" id="dice3"></span>
    <span class="dice" id="dice4"></span>
    <span class="dice" id="dice5"></span>
    <p>
    </body>
    </html>
    Thanks thats exatly what i need now i just have to integrate the dice into my game and change it! but how could i change dice1-dice5 to be input boxes?
    Last edited by sherlockturtle; 07-25-2011 at 07:11 PM.

  • #6
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    Heres more or less the bigger picture I have the random number generator.
    Code:
     var randomnumber1=Math.floor(Math.random()*13)
    and then the value of that is placed in input boxes after pressing a button.
    Code:
     function Roll(){
      document.getElementById("D1").value = randomnumber1;
    <input type="Text" ID="D1" size="1" value=" " READONLY />
    But i can only press the button roll once then i have to reload the page.

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    This is because you are generating the random number only once ... in the global scope ... why don't you just do it inside the Roll() function right before you change the value of the input??
    Code:
    function Roll(){
      var randomnumber1=Math.floor(Math.random()*13);
      document.getElementById("D1").value = randomnumber1;
    }

  • Users who have thanked devnull69 for this post:

    sherlockturtle (07-25-2011)

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Well, yes, as you are only generating the random number once.

    Code:
    <script type = "text/javascript">
    function Roll() {
    var randomnumber1 = Math.floor(Math.random()*13); // generates 0-12
    document.getElementById("D1").value = randomnumber1;
    }
    </script>
    
    <input type = "button" value = "Roll" onclick = "Roll()">
    <input type="text" id="D1" size="1" value=" " readonly>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    sherlockturtle (07-25-2011)

  • #9
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    Thanks you devnull69 and Philiph M

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Ummm.... How can you roll a zero if you roll a pair of dice? For that matter, how can you roll a 1? And not only that, as that code exists, the likelihood of rolling a 7 is the same as the likelihood of rolling a 12. Not a realistic simulation of rolling a pair of dice.

    If you *REALLY* want to simulate rolling a *PAIR* of dice, you must make two separate "rolls", one per die.

    Thus:
    Code:
    <script type = "text/javascript">
    function Roll(form) {
        var die1 = 1 + Math.floor(Math.random() * 6);
        var die2 = 1 + Math.floor(Math.random() * 6);
        form.D1.value = die1;
        form.D2.value = die2;
        form.Total.value = die1 + die2;
    }
    </script>
    ...
    <form>
    <input type="button" value="Roll" onclick="Roll(this.form)">
    <input type="text" name="D1" size="1" value=" " readonly>
    <input type="text" name="D2" size="1" value=" " readonly>
    <input type="text" name="Total" size="2" value=" " readonly>
    </form>
    ...
    Of course, if you really *DO* have a funky 13-sided die, then doing
    Code:
    var randomnumber1 = Math.floor(Math.random()*13); // generates 0-12
    could make sense. But I don't know of any way to make a 13-sided die in real life that would have an equal chance of each of the 13 numbers coming up.

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Additional alternate options to consider...

    I'm with 'Old Pedant' in that I don't understand the 13 sided die,
    but if you want to use the <input> tag, this is one modification.

    Note #1: If you don't want the user to change the random value generated
    then add a "readonly" to the input tag, like:
    <input type="text" class="dice" id="dice1" size="1" readonly>

    Note #2: You could get fancy and substitute a die image for the <input> tags
    with an <img> tag. Change the source of the image to match the random # generated.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function getRandomNumber() {
      return Math.floor(Math.random()*6)+1;
    }
    function RollDice() {
      document.getElementById('dice1').value = getRandomNumber();
      document.getElementById('dice2').value = getRandomNumber();
      document.getElementById('dice3').value = getRandomNumber();
      document.getElementById('dice4').value = getRandomNumber();
      document.getElementById('dice5').value = getRandomNumber();
    }
    window.onload = function() {
      RollDice();
    }
    </script>
    <style type="text/css">
    .dice { border:1px solid blue; font-size:3em; }
    </style>
    
    </head>
    <body>
    <button onclick="RollDice()">Roll Dice</button>
    <p>
    <input type="text" class="dice" id="dice1" size="1">
    <input type="text" class="dice" id="dice2" size="1">
    <input type="text" class="dice" id="dice3" size="1">
    <input type="text" class="dice" id="dice4" size="1">
    <input type="text" class="dice" id="dice5" size="1">
    <p>
    </body>
    </html>
    Good Luck again!

  • #12
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Rather than hard code the number of dice into a function you could as another option create a single die object and then create as many instances of it you need for the number of dice you need.

    In this demo, you input how many dice you want to throw and then when you click the Roll Dice button, the resuls of each die are shown.

    If you want to display the results of the individual dice in html elements, imo it is better to create the elements dynamically according to the number of dice created. Otherwise, if you hard code the html results elements you will need to edit the html if the number of dice changes.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                function DieO(){
                    this.getValue = function(){
                        return  1+Math.floor(Math.random()*6);
                    }
                }
                function rollDie(){
                    var str='';
                    for(i=0; i < dieA.length; i++){
                        str += 'Die '+ (i+1) + ' = '+  dieA[i].getValue()+"\n";
                    }
                    alert(str);
                }
                window.onload=function(){
                    document.getElementById('btnCreateDice').onclick=function(){
                        var numDice = new Number(document.getElementById('txtNumDice').value);
                        dieA = new Array();
                        for(i=0; i < numDice; i++){
                            dieA[i] = new DieO();
                        }
                        alert(dieA.length+' dice created');
                    }
                    document.getElementById('btnRollDice').onclick=rollDie;
                }
            </script>
        </head>
        <body>
            <div>
                Enter number of dice you want to throw:
                <input type="text" id="txtNumDice" />
                <button id="btnCreateDice">Create Dice</button>
            </div>
            <div>
                <button id="btnRollDice">Roll Dice</button>
            </div>
        </body>
    </html>
    Last edited by bullant; 07-26-2011 at 01:36 AM.

  • Users who have thanked bullant for this post:

    webdev1958 (08-13-2011)

  • #13
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by Old Pedant View Post
    I don't know of any way to make a 13-sided die in real life that would have an equal chance of each of the 13 numbers coming up.
    You could build a mould to make the dice. The mould would be a "sphere" with 13 equally sized and spaced "flat spots" on its surface. When you roll the "sphere" it will eventually come to rest on one of the flat spots.
    Last edited by bullant; 07-26-2011 at 03:35 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •