时间戳

首页 > 解决方案 > 为什么不读取第二个 IF 语句？

javascript - 为什么不读取第二个 IF 语句？

问题描述

第二条if语句未到达/读取。

我切换了两个if语句的顺序；只有第一个会产生结果。我把分号放在各个地方，但现在我明白它们是可选的。我删除了行空间。

function myChoices() {
 if (document.getElementById("state").checked) 
    {document.write("state")}
 else if (document.getElementById("county").checked) 
    {document.write("county")}
 else {document.write("country")}   

 if (document.getElementById("range30").checked) 
    {document.write("30yrs")}
 else if (document.getElementById("range50").checked) 
    {document.write("50 yrs")}
 else {document.write("100yrs")}   
}  
<input type="radio" name="region" id="state">State <br>
<input type="radio" name="region" id="county">county <br>
<input type="radio" name="region" id="country">country <br>
<br><br>
<input type="radio" name="timerange" id="range30">30 years<br>
<input type="radio" name="timerange" id="range50">50 years<br>
<input type="radio" name="timerange" id="range100">100 years<br>

<button onclick="myChoices()">my selections are made</button>

我从每组单选按钮中选择一个选项，然后单击该按钮。仅返回第一个的结果if。

为什么？

标签： javascriptfunctionif-statement

解决方案

问题是document.write。根据经验，永远不要使用document.write.

在您的示例中，当第一if条语句调用时document.write，它会清除 HTML 文档并将其替换为 eg country。

然后if (document.getElementById("range30").checked)运行，但document.getElementById("range30")没有找到任何具有 id 的元素，range30因为整个页面已被清除并替换为country，所以它返回null。尝试访问null.checked会引发异常，从而中止函数的执行。

如果你真的想使用document.write（我不推荐），只调用一次，在你的函数结束时：

function myChoices() {
  var text = "";
  if (document.getElementById("state").checked) {
    text += "state";
  } else if (document.getElementById("county").checked) {
    text += "county";
  } else {
    text += "country";
  }

  if (document.getElementById("range30").checked) {
    text += "30yrs";
  } else if (document.getElementById("range50").checked) {
    text += "50 yrs";
  } else {
    text += "100yrs";
  }
  
  document.write(text);
}
<input type="radio" name="region" id="state">State <br>
<input type="radio" name="region" id="county">county <br>
<input type="radio" name="region" id="country">country <br>
<br><br>
<input type="radio" name="timerange" id="range30">30 years<br>
<input type="radio" name="timerange" id="range50">50 years<br>
<input type="radio" name="timerange" id="range100">100 years<br>

<button onclick="myChoices()">my selections are made</button>

推荐阅读