Question

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

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

Answer 1

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

Answer 2

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) { ... }
    }
}

Answer 3

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

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

Answer 4

我认为你真正想要的是：

<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();"

为什么GetElementsByTagName不以这种形式工作？

4 个答案: