Question

我试图显示和隐藏根据其所属问题而变化的信息。但是，在我的代码中，无论选择哪个问题，第一个问题中的信息都会显示或隐藏。任何想法如何解决？

Javascript：

function displayQuestion(answer) {
    document.getElementById(answer + 'Question').style.display = "block";

    if (answer == "yes") {
        document.getElementById('noQuestion').style.display = "none";
    } else if (answer == "no") {
        document.getElementById('yesQuestion').style.display = "none"; 
    }
}

HTML：

<p>1. Would you like to improve financial structure?</p>
<label>
    <input type="radio" id="yes" name="yesOrNo" value="yes" onchange="displayQuestion(this.value)" />
    Yes, i am interested
</label>
<label>
    <input type="radio" id="no" name="yesOrNo" value="no" onchange="displayQuestion(this.value)" />
    No, hide the info
</label>
<br>
<div id="yesQuestion" style="display:none;">
    <br/>
    <p> Financial Info </p>
    <button onclick="window.location.href='fin.html'">
        Continue
    </button>
    </form>
</div>

<div id="noQuestion" style="display:none;">
    <br/>
</div>
</br>

<p>2. Would you like to improve your production? </p>
<label>
    <input type="radio" id="yes" name="yesOrNo" value="yes" onchange="displayQuestion(this.value)" />
    Yes, i am interested
</label>
<label>
    <input type="radio" id="no" name="yesOrNo" value="no" onchange="displayQuestion(this.value)" />
    No, hide the info
</label>

<div id="yesQuestion" style="display:none;">
    <br/>
    <p> Production Info </p>
    <button onclick="window.location.href='prod.html'">
        Continue
    </button>
    </form>
</div>

<div id="noQuestion" style="display:none;">
    <br/>
</div>

提前致谢！

Answer 1

你有多个具有相同ID的元素。这是无效的HTML。因此

document.getElementById(answer + 'Question')

当回答=＆＃34;是＆＃34;将始终选择ID为＃34; yesQuestion＆＃34;的第一个元素。它会忽略具有相同ID的所有其他ID，因为它们被视为无效。

您需要使ID唯一，然后调整＆＃34;值＆＃34;相应的单选按钮属性，因此您的代码将选择正确的元素。

Answer 2

JavaSCript解决方案：

问题：您有许多具有相同id的元素。 HTML中的黄金法则＆＃34;对于多个元素＆＃34; ，永远不会有相同的ID。如果您希望它们都具有相同的标识符，请使用class。

此外，您的单选按钮在两个问题上都有相同的名称，使一个问题单选按钮具有相同的名称。这样，当您回答第二个问题时，它不会取消选中当前在您的代码中发生的第一个问题选项。

解决方案： Id唯一，这解决了no matter which question is selected, the infromation in the first question shows or respectively hides.所述的问题我还确保通过添加前缀来更改ID现有ID的问题编号

例如：yesQuestion已更改为1yesQuestion和2yesQuestion

noQuestion已更改为1noQuestion和2noQuestion

通过这种方式，我们在元素上拥有所有唯一ID，另一个更改是将问题编号也传递到displayQuestion函数中。

onchange="displayQuestion(this.value,1)"

以下是按预期工作的代码段。

＆＃13;

function displayQuestion(answer,questionNumber) {
   
  document.getElementById(questionNumber + answer + 'Question').style.display = "block";
  
  if (answer == "yes") {

    document.getElementById(questionNumber+'noQuestion').style.display = "none";

  } else if (answer == "no") {

    document.getElementById(questionNumber+'yesQuestion').style.display = "none";

  }

}

＆＃13;

<p>1. Would you like to improve financial structure?</p>
<label>
  <input type="radio" id="" name="1yesOrNo" value="yes" onchange="displayQuestion(this.value,1)" />Yes, i am interested</label>
<label>
  <input type="radio" id="" name="1yesOrNo" value="no" onchange="displayQuestion(this.value,1)" />No, hide the info</label>


<br>
<div id="1yesQuestion" style="display:none;">
  <br/>
  <p>Financial Info</p>
  <button onclick="window.location.href='fin.html'">Continue</button>
  </form>
</div>

<div id="1noQuestion" style="display:none;">
  <br/>

</div>
</br>

<p>2. Would you like to improve your production?</p>
<label>
  <input type="radio" id="" name="2yesOrNo" value="yes" onchange="displayQuestion(this.value,2)" />Yes, i am interested</label>
<label>
  <input type="radio" id="" name="2yesOrNo" value="no" onchange="displayQuestion(this.value,2)" />No, hide the info</label>


<div id="2yesQuestion" style="display:none;">
  <br/>
  <p>Production Info</p>
  <button onclick="window.location.href='prod.html'">Continue</button>
  </form>
</div>

<div id="2noQuestion" style="display:none;">
  <br/>

</div>

＆＃13;

希望这有用。

在javascript

2 个答案: