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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with setting a variable equal to user input

    So I just started writing a script, which is supposed to take a value entered into a text field, and roll a D6 a number of times equal to that input. The problem is, I can only get the loop to work if the value is set in the html (i.e. value="6" will cause the die to be rolled 6 times, but it won't update to rolling just 3 times if the user enters a 3, and if I have no value set in the html it doesn't roll at all no matter what the user enters).
    So this has me stumped, anyone know of a solution?


    EDIT
    I actually am not sure what I did right but it's working now. If the admins think this will be useful keep the post up I guess, otherwise delete it.
    Here's basic working code to roll a few different types of dice.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    </head>
    <body>
    
    <form id="jsdice"> 
    <h3> Roll D4</h3>
    <p>how many D4's do you want to roll?</p>
    <input type="text" id="d4_amount" name="d4_amount" value="1">
    <input type="button" value="Roll the Dice" onClick="roll_d4('d4')" /> 
    <div id="d4"></div>
    
    <h3> Roll D6</h3>
    <p>how many D6's do you want to roll?</p>
    <input type="text" id="d6_amount" name="d6_amount" value="1">
    <input type="button" value="Roll the Dice" onClick="roll_d6('d6')" /> 
    <div id="d6"></div>
    
    
    
    </form>
    
    
    <script type="text/javascript">
    
    /* function to roll a d4 */
    
    function roll_d4()
    {
    var dice_quantity = document.getElementById('d4_amount').value;	
    for (i = 1; i <= dice_quantity; i++) 
    	{ 
    var d4 = Math.floor(Math.random() * 4) + 1;
    
    
    document.getElementById('d4').innerHTML += d4 + "<br>";
    
    	}
    }
    /* end roll d4 */
    
    
    /* function to roll a d6 */
    
    function roll_d6()
    {
    var dice_quantity = document.getElementById('d6_amount').value;	
    for (i = 1; i <= dice_quantity; i++) 
    	{ 
    var d6 = Math.floor(Math.random() * 6) + 1;
    
    
    document.getElementById('d6').innerHTML += d6 + "<br>";
    
    	}
    }
    /* end roll d6 */
    
    </script>
    
    </body>
    </html>
    Last edited by AngryToucan; 09-23-2012 at 07:44 AM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    var dice_quantity = document.getElementById('amount').value;
    .value is always a string, so it needs to be converted to a number:

    Code:
    var dice_quantity = document.getElementById('amount').value;
    dice_quantity = parseInt(dice_quantity);
    Code:
    document.getElementById('d6').innerHTML += dice + "<br>";
    You can't append to innerHTML in this way, as it is not a simple string:

    Code:
    var current_inner = document.getElementById('d6').innerHTML;
    document.getElementById('d6').innerHTML = current_inner + dice + "<br>";
    You are also passing your functions values of 'd4' and 'd6' which are ignored.

    I haven't checked anything else
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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