基本的Javascript HTML表单 - OnClick不工作(我确定这是显而易见的?)

时间:2013-11-12 15:00:26

标签: javascript html forms

这是JSFiddle链接:http://jsfiddle.net/rTJw2/1/

这是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>

我确信这是显而易见的。我刚刚开始学习如何在页面上实现javascript,我只想在按下提交按钮时运行该函数。

有什么想法吗?

5 个答案:

答案 0 :(得分:0)

在浏览器中使用开发人员工具运行此操作,您会在var gender === "male";var gender === "female";上看到语法错误。

===用于比较相等,而不是用于分配值。单个=用于分配值。

答案 1 :(得分:0)

更新了JSFiddle:http://jsfiddle.net/b59vR/

多个问题:

<script type="Javscript">

应为<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.

相反,使用=,它用于设置变量

总之,它应该是:

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

答案 2 :(得分:0)

好的,首先。

由于函数的范围,这在jsfiddle中永远不会起作用。 jsfiddle在onload事件上运行你的JS,这意味着函数scriptResult()包含在onload函数中,并且不能被按钮调用。

更正,如果您将JS的位置更改为“head”而不是“onload”,它将会起作用

其次,您在if / else语句中声明了您的性别变量。也限制了范围。性别变量需要在声明之外声明。并且只在声明中指定。

第三,使用=,而不是===

function scriptResult() {

    var gender;

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

    alert(gender);
}

答案 3 :(得分:0)

这是我的建议

  1. 不要命名任何“提交”
  2. ===是一个比较运算符而非赋值运算符,=
  3. 正确拼写JavaScript或不会发生任何事情
  4. 换一个表单并使用onsubmit if inline,但最好在head onload中添加事件处理程序
  5. 正确使用标签
  6. 在JSFiddle中使用head代替加载
  7. 喜欢这个 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);
      }
    }
    
    使用

    <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>  
    

答案 4 :(得分:-4)

我认为你有一些不合适的地方,我重新安排了:

<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>