Problem with setting a variable equal to user input

AngryToucan · 09-23-2012, 06:13 AM

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>

AndrewGSW · 09-23-2012, 06:50 AM

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