簡體   English   中英

基本的Javascript HTML表單-OnClick無法正常工作(我確定這很明顯嗎?)

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

這是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,並且只想在按下“提交”按鈕時運行該函數。

有任何想法嗎?

在瀏覽器中使用開發人員工具運行它,您將看到var gender === "male";上的語法錯誤var gender === "male"; var gender === "female";

===用於比較相等性,而不是分配值。 單個=用於分配值。

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

好的,首先。

由於函數的范圍,這在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,但最好在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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM