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

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

本文关键字：显而易见 不起作用 HTML Javascript 表单 OnClick      更新时间：2023-09-26

这是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，我只想在按下提交按钮时运行该函数。

有什么想法吗？

更新的 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);
}
在

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

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

好的，首先。

这在 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);
}
这是我

的建议

  1. 不要命名任何"提交"
  2. ===是一个比较运算符，而不是分配运算符，这是=
  3. 正确拼写JavaScript，否则什么都不会发生
  4. 包装在表单中，如果内联，则使用 onsubmit，但最好在 head onload 中添加事件处理程序
  5. 正确使用标签
  6. 在 JSFiddle 中使用 head 而不是在加载时

喜欢这个现场演示

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>

我认为您有一些不合适的地方，我重新安排了：

<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>
相关文章：