...

View Full Version : How to make radio buttons change a function?



V6th
11-21-2010, 12:22 PM
First of all hello, I'm new to these forums and I am also pretty new to javascript.

I have been making a javascript dice throwing app(? or whatever it's supposed to be called), but can't figure out how to make 2 functions for one button.

I'm trying to have both of my dice (6- and 20-sided) to be controlled by the same throwing-button, but have radiobuttons to decide which one to throw. And I need help with that.

Here is what I have so far:


<html>
<head>
<title>Noppa</title>


Heitš Noppaa!
<form name="form1">
<INPUT type="button" value="Heitš" name="button1" onclick="noppa6()">
<input name="noppaluku6" type="text" size="2" value=" ">
</form>


<form name="form2">
<INPUT type="button" value="20" name="button2" onclick="noppa20()">
<input name="noppaluku20" type="text" size="2" value=" ">
</form>

<INPUT type="radio" name="np" value="noppa6" >6-kuutioinen
<br>
<INPUT type="radio" name="np" value="noppa20">20-kuutioinen

<script language="javaScript">
var luku

function noppa6()
{

switch ((Math.floor(Math.random()*6)+1))
{
case 1:
luku="1"
break;

case 2:
luku="2"
break;

case 3:
luku="3"
break;

case 4:
luku="4"
break;

case 5:
luku="5"
break;

case 6:
luku="6"
break;
}

document.form1.noppaluku6.value=luku

}


var luku

function noppa20()
{

switch ((Math.floor(Math.random()*20)+1))
{
case 1:
luku="1"
break;

case 2:
luku="2"
break;

case 3:
luku="3"
break;

case 4:
luku="4"
break;

case 5:
luku="5"
break;

case 6:
luku="6"
break;

case 7:
luku="7"
break;

case 8:
luku="8"
break;


case 9:
luku="9"
break;


case 10:
luku="10"
break;


case 11:
luku="11"
break;


case 12:
luku="12"
break;

case 13:
luku="13"
break;


case 14:
luku="14"
break;


case 15:
luku="15"
break;


case 16:
luku="16"
break;


case 17:
luku="17"
break;


case 18:
luku="18"
break;


case 19:
luku="19"
break;


case 20:
luku="20"
break;



}

document.form2.noppaluku20.value=luku

}

</script>
</head>
<body>
<br>




<br>
</body>
</html>


Also I now have two throw a dice buttons, but I only need one for both.

Some of the words are in finnish so here are translations (if they are needed):
noppa=dice
luku=number
heitš=throw
kuutioinen=sided

Thanks in advance if you can help me with my problem! :D

Dormilich
11-21-2010, 12:35 PM
the elegant way:

button.addEventListener("click", function1, false);
button.addEventListener("click", function2, false);
the compatible way:

button.onclick = function (evt)
{
evt = evt || window.event;
function1(evt);
function2(evt);
}

PS.

function noppa6()
{
document.form1.noppaluku6.value = Math.ceil(Math.random() * 6);
}

Philip M
11-21-2010, 01:45 PM
function noppa6() {
luku = Math.floor(Math.random()*6)+1);
// what is the point of the switch statement?
switch(luku) {

All you need is
document.form1.noppaluku6.value = luku;

Values within quotes such as "3" are strings. Numeric values should be without quotes.

<script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead.




The secret of success in life is honesty and fair dealing. If you can fake that, you've got it made. - Groucho Marx (1890 - 1977)

V6th
11-21-2010, 04:50 PM
the elegant way:

button.addEventListener("click", function1, false);
button.addEventListener("click", function2, false);
the compatible way:

button.onclick = function (evt)
{
evt = evt || window.event;
function1(evt);
function2(evt);
}

PS.

function noppa6()
{
document.form1.noppaluku6.value = Math.ceil(Math.random() * 6);
}


Ummm... where do I put those? :o

Here's what I have so far:


<html>
<head>
<title>Noppa</title>


Heitš Noppaa!
<form name="form1">
<INPUT type="button" value="Heitš" name="button1" onclick="noppa6()">
<input name="noppaluku6" type="text" size="2" value=" ">
</form>




<INPUT type="radio" name="np" value="noppa6" >6-kuutioinen
<br>
<INPUT type="radio" name="np" value="noppa20">20-kuutioinen

<script type = "text/javascript">
var luku

function noppa6()
{
document.form1.noppaluku6.value = Math.ceil(Math.random() * 6);
}

function noppa20()
{
document.form1.noppaluku20.value = Math.ceil(Math.random() * 20);
}


</script>
</head>
<body>
<br>




<br>
</body>
</html>

Philip M
11-21-2010, 05:25 PM
Here you are. Study the code and learn from it!


<html>
<head>

<script type = "text/javascript">

var numSides; // declare global variable
function showDice(howMany) { // pass the value 6 or 20 to the function
numSides = howMany;
if (numSides) { // if numSides is not 0, null, undefined or false
document.form1.noppaluku.value = Math.ceil(Math.random() * numSides); // roll the dice
if (numSides == 6) {x = 1}
if (numSides == 20) {x = 0}
document.form1.np[x].disabled = true; // disable the radio button not selected so both dice cannot be rolled
}
}

</script>
</head>
<body>
<br>

<form name = "form1">
<input type="radio" name="np" onclick = "showDice(6)">6-kuutioinen
<br>
<input type="radio" name="np" onclick = "showDice(20)">20-kuutioinen
<br>
<input type = "text" size = "2" name = "noppaluku" readonly>
<input type = "button" value = "Roll the dice again" onclick = showDice(numSides)>
</form>

</body>
</html>

V6th
11-21-2010, 06:22 PM
One last question.

When you click a radio button while in browser you can't change the selection unless you close the page. Is there a way to change that?

And thanks to both of you for helping :D !

Philip M
11-21-2010, 06:52 PM
Well, I included that deliberately to prevent someone rolling both the 6-sided dice and the 20-sided dice in the same "game".

If you do not want that, I think you ought to be able to make this simple modification yourself. :p

V6th
11-21-2010, 06:59 PM
Well that was easier than I thought, thanks (again)! :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum