为什么第二条IF语句不读？

Question

第二个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的结果。

为什么？

Answer 1

问题是document.write。根据经验，切勿使用document.write。

在您的示例中，当第一个if语句调用document.write时，它会擦除​​HTML文档，并以代替。 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>

Answer 2

除了以上对响应的回答外，在回调中使用document.write也不是一个好主意，因为在加载文档后调用它会替换文档内容。如果文档仍处于打开状态，则不会替换内容。

使用.appendChild（）添加新的DOM元素总是更安全。

对于您的用例，可以使用.textContent显示结果。

function myChoices() {
var resBox = document.getElementById("result");
var selectedRegion = "";
var selectedTimerange = "";

 if (document.getElementById("state").checked) 
    {selectedRegion ="state"}
 else if (document.getElementById("county").checked) 
    {selectedRegion = "county"}
 else {selectedRegion ="country"}   

 if (document.getElementById("range30").checked) 
    {selectedTimerange ="30yrs"}
 else if (document.getElementById("range50").checked) 
    {selectedTimerange ="50yrs" }
 else {selectedTimerange ="100yrs"}
 resBox.textContent = `${selectedRegion} ${selectedTimerange}`
 
}

<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>
<p id="result"></p>

Answer 3

单击提交按钮时，将调用myChoices()函数。

第一次看到document.write时，它将用您的input中的文本替换整个HTML标记。

您可以检查摘录结果的正文：