Basic Javascript HTML form - OnClick not working (I'm sure it's something obvious?)

Question

Here's the JSFiddle link: http://jsfiddle.net/rTJw2/1/

Here's the HTML:

<label for="gender">Gender: </label>
<input type="radio" name="genderS" id="g1" value="male" checked="checked">Male</input>
<input type="radio" name="genderS" id="g2" value="female" >Female</input>
<br>
<input name="submit" type="submit" value="Select" onclick="scriptResult();"/>

<script type="Javascript">

function scriptResult(){

if (document.getElementById('g1').checked) {
var gender === "male"; 
} else if (document.getElementById('g2').checked) {
var gender === "female";   
};

 alert(gender);
};



</script>

I'm sure it's something obvious. I'm just starting to learn how to implement javascript on pages, and I just want to run the function when the submit button is pressed.

Any ideas?

Answer 1

Run this with developer tools on in your browser, and you'll see the syntax error on var gender === "male"; and var gender === "female"; .

=== is for comparing equality, not for assigning a value. A single = is for assigning a value.

Answer 2

Updated JSFiddle: http://jsfiddle.net/b59vR/

Multiple problems:

<script type="Javscript">

should be <script type="text/javascript">

else if (document.getElementById('g2').checked) {
    var gender === "female";   
}; //There should not be a semicolon here, or at the end of the function

var gender === "male"; //You should not use a triple equals here.

Instead, use = , it is used for setting variables

In all, it should be:

function scriptResult(){
    if(document.getElementById("g1").clicked){
        var gender="male";
    }else{
        var gender="female";
    }
    alert(gender);
}

Answer 3

Okay, first of all.

This will never work in jsfiddle, because of the scope of the function. jsfiddle runs your JS on the onload event, which means that the function scriptResult() is enclosed in the onload function and can't be called by the button.

Correction, it WILL work if you change the placement of the JS to "head" instead of "onload"

Second, you're declaring your gender variable inside of the if/else statement. Also limiting scope. The gender variable needs to be declared outside of the statement. And only assigned in the statement.

Third, use = , not === .

function scriptResult() {

    var gender;

    if (document.getElementById('g1').checked) {
        gender = "male"; 
    } 
    else if (document.getElementById('g2').checked) {
        gender = "female";   
    }

    alert(gender);
}

Answer 4

Here is my suggestion

1. do not name anything "submit"
2. === is a comparison operator not assignment operator which is =
3. spell JavaScript correctly or nothing will happen
4. wrap in a form and use onsubmit if inline, but better add the event handler in the head onload
5. use label correctly
6. use head instead of on load in JSFiddle

Like this Live Demo

window.onload=function() {
  document.getElementById("form1").onsubmit=function() {
    var gender = "unknown";
    if (document.getElementById('g1').checked) {
      gender = "male"; 
    } 
    else if (document.getElementById('g2').checked) {
      gender = "female";   
    }
    alert(gender);
  }
}

using

<form id="form1">
  Gender:
  <input type="radio" name="genderS" id="g1" value="male"   checked="checked" /><label for="g1">Male</label>
<input type="radio" name="genderS" id="g2" value="female"/><label for="g2">Female</label>
<br>
<input type="submit" value="Select"/>
</form>  

Answer 5

I think you have some things out of place, I rearranged:

<script type="Javascript">

function scriptResult() {

    var gender = "";

    if (document.getElementById('g1').checked) {
        var gender = "male"; 
    } 
    else if (document.getElementById('g2').checked) {
        var gender = "female";   
    }

    alert(gender);
}
</script>