hide/show javascript 中的不同信息

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')

当 answer = "yes" 时，将始终 select ID 为 "yesQuestion" 的第一个元素。它会忽略所有具有相同 ID 的其他人，因为它们被认为是无效的。

您需要使 ID 唯一，然后相应地调整单选按钮的 "value" 属性，这样您的代码就会 select 正确的元素。

Answer 2

JavaSCript 解决办法：

问题： 你有很多相同的元素 id。 HTML 中的黄金法则是 "Never have the same Id for multiple elements"。如果您希望它们都具有相同的标识符，请使用 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)"

下面是符合您预期的代码片段。

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

  }

}

<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>

希望这对您有所帮助。

hide/show javascript 中的不同信息

hide/show different information in javascript

javascript

show-hide