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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to make radio buttons change a function?

    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:
    Code:
    <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!

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,444
    Thanks
    13
    Thanked 361 Times in 357 Posts
    the elegant way:
    PHP Code:
    button.addEventListener("click"function1false);
    button.addEventListener("click"function2false); 
    the compatible way:
    PHP Code:
    button.onclick = function (evt)
    {
        
    evt evt || window.event;
        
    function1(evt);
        
    function2(evt);

    PS.
    PHP Code:
    function noppa6()
    {
        
    document.form1.noppaluku6.value Math.ceil(Math.random() * 6);

    Last edited by Dormilich; 11-21-2010 at 01:38 PM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    V6th (11-21-2010)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,244
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    Code:
    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)
    Last edited by Philip M; 11-21-2010 at 02:47 PM.

  • Users who have thanked Philip M for this post:

    V6th (11-21-2010)

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dormilich View Post
    the elegant way:
    PHP Code:
    button.addEventListener("click"function1false);
    button.addEventListener("click"function2false); 
    the compatible way:
    PHP Code:
    button.onclick = function (evt)
    {
        
    evt evt || window.event;
        
    function1(evt);
        
    function2(evt);

    PS.
    PHP Code:
    function noppa6()
    {
        
    document.form1.noppaluku6.value Math.ceil(Math.random() * 6);


    Ummm... where do I put those?

    Here's what I have so far:
    Code:
    <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>

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,244
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    Here you are. Study the code and learn from it!

    Code:
    <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>
    Last edited by Philip M; 11-21-2010 at 06:31 PM.

  • Users who have thanked Philip M for this post:

    V6th (11-21-2010)

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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 !

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,244
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    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.

  • Users who have thanked Philip M for this post:

    V6th (11-21-2010)

  • #8
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Well that was easier than I thought, thanks (again)!


  •  

    Posting Permissions

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