爲什麼GetElementsByTagName不以這種形式工作？

我有一個表單在avidest.com/new。第一個字段是一個單選按鈕。在電子郵件字段下面是一個提示，應根據爲單選按鈕選擇哪個值進行更改。如果選擇僱主，則提示應該說「請使用您公司的電子郵件地址」。如果選擇了自由職業者，提示應該說「請使用您的學校電子郵件地址。」。出於某種原因，我的JavaScript代碼不起作用。我試圖用GetElementsByName替換getElementsByTagName，但這不起作用。這裏是我的html頁面的< head>部分寫功能：爲什麼GetElementsByTagName不以這種形式工作？

<script> 
function topHint(){ 
    if(document.getElementsByTagName('Type').value == "Freelancer"){ 
    document.getElementById('employorlance').innerHTML = "Please use your school e-mail address."; 
    } 
    if(document.getElementsByTagName('Type').value == "Employer"){ 
    document.getElementById('employorlance').innerHTML = "Please use your company e-mail address."; 
    } 
} 
</script>

我然後調用該函數在頁面加載時：

<body onload = "topHint()">

這裏是在表單元素頁碼：

<label id="item4_0_label"> 
    <input type="radio" id="item4_0_radio" data-hint="" required value="Freelancer" name="Type" /> 
     <span class="fb-fieldlabel" id="item4_0_span">Freelancer 
     </span> 
</label> 
<label id="item4_1_label"> 
    <input type="radio" id="item4_1_radio" required value="Employer" name="Type" /> 
     <span class="fb-fieldlabel" id="item4_1_span">Employer 
     </span> 
</label> 
<div class="fb-hint" id ="employorlance" style="color: rgb(136, 136, 136); font-weight: normal; font-style: normal; "> 
    Please use your school email address. 
</div>

謝謝。

後從stakoverflow的建議，我嘗試以下，但它仍然不工作：

function topHint() { 
    var elems = document.getElementsByName("Type"); 
    for (i in elems) { 
     if (elems[i].value == "Freelancer") { 
      document.getElementById('employorlance').innerHTML = "Please use your school e-mail address."; 
     } 

     if (elems[i].value == "Employer") { 
      document.getElementById('employorlance').innerHTML = "Please use your company e-mail address."; 
     } 
    } 
}

來源

2013-03-07 Philip7899

的getElementsByTagName（ '類型'）返回值的集合，你需要更具體一點，它的標籤名稱。 – Toping 2013-03-07 20:56:19

getElementsByTagName方法不返回具有匹配名稱的單個元素，它返回一個包含匹配標籤名稱的元素數組。

在你的情況下，你會得到一個空數組，因爲你沒有任何<type>元素。

的getElementsByName方法還返回一個數組，而你總是讓所有的單選按鈕，而不是隻對選定的一個，所以你必須檢查狀態：

function topHint(){ 
    var radios = document.getElementsByName('Type'); 
    if(radios[0].checked){ 
    document.getElementById('employorlance').innerHTML = "Please use your school e-mail address."; 
    } 
    if(radios[1].checked){ 
    document.getElementById('employorlance').innerHTML = "Please use your company e-mail address."; 
    } 
}

來源

2013-03-07 20:58:12 Guffa

謝謝，我將它改爲GetElementsByName，但它仍然無法正常工作。 – Philip7899 2013-03-07 21:00:32

@ Philip7899：'getElementsByName'方法也返回一個數組。我在上面添加了一些解釋。 – Guffa 2013-03-07 21:11:32

Guffa，非常感謝。終於搞定了！ – Philip7899 2013-03-07 21:19:51

getElementsByTagName選擇HTML標籤（body, input, form等）

你想用document.getElementsByName("Type")：

var elems = document.getElementsByName("Type"); 

function topHint() { 
    for (i in elems) { 
     if (elems[i].value == "Freelancer" && elems[i].checked) { ... } 
     if (elems[i].value == "Employer" && elems[i].checked) { ... } 
    } 
}

來源

2013-03-07 20:57:01

不會繼續工作 – Toping 2013-03-07 20:58:11

謝謝，我試過，但它仍然不工作... – Philip7899 2013-03-07 20:58:34

是的，那是因爲它返回一個數組。我更新了我的答案;再試一次。此外，你可以澄清什麼功能_supposed_做？ @Ark什麼不工作？我沒有提供代碼示例。 – 2013-03-07 21:01:09

正如你已經擁有獨特的單選按鈕上的ids，爲什麼不使用document.getElementById？

if(document.getElementById('item4_0_radio').checked){ 
    // change the hint text 
}

來源

2013-03-07 21:03:28 dchiang

我想你真正想要的是這樣的：

<script> 
function topHint(){ 
    if (document.getElementById('item4_0_radio').checked) { 
     document.getElementById('employorlance').innerHTML = 
     "Please use your school e-mail address."; 
    } 
    else { 
     document.getElementById('employorlance').innerHTML = 
     "Please use your company e-mail address."; 
    } 
} 
</script>

然後，在每個單選按鈕添加：onclick="topHint();"

來源

2013-03-07 21:10:30

謝謝，試過你的建議布萊恩，但它仍然不工作... – Philip7899 2013-03-07 21:16:22

這是[jsFiddle]（http://jsfiddle.net/6Rnum/）展示它的工作原理。你的頁面中必須有其他不同的東西。 – 2013-03-07 21:26:16

爲什麼GetElementsByTagName不以這種形式工作？

回答

相關問題