Making javascript check what radio form has been selected

Question

I am trying to make a dog race. Basically what I want is to check what radio the user checked, compare it to a random number between 1 - 5 and see if he won.

My question is... How do I compare them?

This is my code so far.

  function chooser(){
    var theDogs = ["dog1","dog2","dog3","dog4","dog5"],

     rand = theDogs[Math.floor(Math.random() * theDogs.length)];

    document.getElementById("winner").innerHTML = rand;


if(pick == rand)
    {document.getElementById("winner").innerHTML =("win!");}
        else {
            document.getElementById("winner").innerHTML =("loose");
        }
    }

HTML:

<form id="pick" action="rand">
<input type="radio" name="dog" id="dog1">Dog1<br>
<input type="radio" name="dog" id="dog2">Dog2<br>
<input type="radio" name="dog" id="dog3">Dog3<br>
<input type="radio" name="dog" id="dog4">Dog4<br>
<input type="radio" name="dog" id="dog5">Dog5<br>
</form>

<br>
<br>
        <input type="submit" value="Gamble" onclick="chooser();">
<br>

<p id="winner"> </p>

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

You need to give each radio button a value, and then getElementsByName, iterating through to find the one that's checked. See similar thread...

edited May 23 '17 at 12:24

Community

1
1

answered Dec 18 '16 at 00:13

Hussein Duvigneau

531
3
12

score 0 · Accepted Answer · answered Dec 18 '16 at 01:49

A jQuery and Native JavaScript Approach. Take your pick.

$("#submitjq").click(function() {
       var theDogs = ["dog1","dog2","dog3","dog4","dog5"],

       rand = theDogs[Math.floor(Math.random() * theDogs.length)];

      var pick = $("input[type=radio][name='dog']:checked").val();
      if(pick == rand)
      {
          $("#winner").html("jQuery: Won!");
      }
      else {
          $("#winner").html("jQuery: Lost!");
      }
});
  
document.getElementById('submitjs').onclick = function () {
   var theDogs = ["dog1","dog2","dog3","dog4","dog5"],

      rand = theDogs[Math.floor(Math.random() * theDogs.length)];

      var pick = document.pick.dog.value;
      console.log(pick);
      if(pick == rand)
      {
          document.getElementById("winner").innerHTML = "JavaScript: Won!" ;
      }
      else {
          document.getElementById("winner").innerHTML =  "JavaScript: Lost!" ;
      }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="pick" name="pick" action="rand">
<input type="radio" name="dog" value="dog1">Dog1<br>
<input type="radio" name="dog" value="dog2">Dog2<br>
<input type="radio" name="dog" value="dog3">Dog3<br>
<input type="radio" name="dog" value="dog4">Dog4<br>
<input type="radio" name="dog" value="dog5">Dog5<br>
</form>

<br>
<br>
        <input type="submit" id="submitjs" value="Gamble Native JavaScript" />
        <input type="submit" id="submitjq" value="Gamble jQuery" />
<br>

<p id="winner"> </p>

Thank you, both your comments helped me out and I finally succeeded! Regards, — Mike W., Dec 18 '16 at 19:24
You should mark it as accepted so other users don't get confused and come to answer this question since this one did the job for you — Devian, Dec 18 '16 at 19:58

Making javascript check what radio form has been selected

2 Answers2