0

我在 avidest.com/new 上有一个表格。第一个字段是一个单选按钮。电子邮件字段下方是一个提示，该提示应根据为单选按钮选择的值而改变。如果选择了雇主，则提示应为“请使用您的公司电子邮件地址”。如果选择了自由职业者，提示应该是“请使用您的学校电子邮件地址。”。出于某种原因，我的 javascript 代码无法正常工作。我试过用 GetElementsByName 替换 getElementsByTagName 但这不起作用。这是我在 html 页面的 <head> 部分中编写的函数：

<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.";
        }
    }
}
4

4 回答 4

2

该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-07T20:58:12.550 回答
1

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-07T20:57:01.020 回答
0

由于您已经在单选按钮上有唯一的 ID，为什么不使用document.getElementById？

if(document.getElementById('item4_0_radio').checked){
    // change the hint text
}
于 2013-03-07T21:03:28.080 回答
0

我认为您真正想要的是：

<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-07T21:10:30.360 回答