Hello and welcome to our community! Is this your first visit?
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
    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?

    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.

    <!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">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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>
    <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 */
    Last edited by AngryToucan; 09-23-2012 at 06:44 AM.

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

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

    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