hide/show different information in javascript

Question

I am trying to show and hide information which changes in accordance with the question it belongs to. In my code, however, no matter which question is selected, the infromation in the first question shows or respectively hides. Any ideas how can that be fixed?

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>

Thanks in advance!

Answer 1

JavaSCript solution:

Problem : You have many elements with the same id. Golden rule in HTML is "Never have the same Id for multiple elements". Use class if you want them to all have same identifiers.

Also your radio buttons have same names on both the questions, Make one question radio buttons to have the same name. This way when you answer the second question it doesn't uncheck the first question option as it happens currently in your code.

Solution: Make the Id unique, This solves the problem stated no matter which question is selected, the infromation in the first question shows or respectively hides. I have also made sure I change the id just by prefixing the question number to the existing id's

Eg: yesQuestion changed to 1yesQuestion and 2yesQuestion

noQuestion changed to 1noQuestion and 2noQuestion

This way we have all unique ids on the elements, Another change is to pass the question number also into the displayQuestion function.

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

Below is the snippet that works as you expected.

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>

Hope this is helpful.