Показать поля формы условно на основе пользовательского радиовхода

Question

У меня небольшая проблема, потому что я новичок в JS. У меня есть 4 записи. Еще одна запись откроется для каждого. На а и б это работает. Я имею в виду, если у меня есть 2 входа, я знаю, как это сделать. Когда я открываю запись aQuestion, она открывается. и в б это то же самое. Проблема в c и d, ie, если у меня более 2 входов. Я пытался, но это не работает ...

Большое спасибо!

function displayQuestion(answer) { 

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

  if (answer == "a") { // hide the div that is not selected

    document.getElementById('bQuestion').style.display = "none";

  }
   if (answer == "b") {

    document.getElementById('aQuestion').style.display = "none";

  }
    
   if (answer == "c") {

    document.getElementById('dQuestion').style.display = "none";

  }

  if (answer == "d") {

    document.getElementById('cQuestion').style.display = "none";

  }


}

<div style="text-align: left;">
  <h2>Tip taxa*</h2><br><br>

  <!--Below is html code. -->
<label>
	<!--First input A -->
    <input class="radioo" type="radio" id="a" name="yesOrNo" required="" value="a" onchange="displayQuestion(this.value)" />A</label>
  <label><br>
  	<!--Second input B-->
    <input class="radioo" type="radio" id="b" name="yesOrNo" required="" value="b" onchange="displayQuestion(this.value)" />B</label><br>
<!--3 input C -->
    <input class="radioo" type="radio" id="c" name="yesOrNo" required="" value="c" onchange="displayQuestion(this.value)" />C</label><br>
<!--4 input D-->
    <input class="radioo" type="radio" id="d" name="yesOrNo" required="" value="d" onchange="displayQuestion(this.value)" />D</label><br>
   



</div>

<!--A new one will open for each of the above inputs-->

<!--For a opne  aQuestion -->
  <div id="aQuestion" style="display:none;"><br/>
    <input type="text" id="suma" name="suma" value="2.00" readonly="">
  </div>
<!--For b opne  bQuestion -->
  <div id="bQuestion" style="display:none;"><br/>

   <input type="text" id="suma" name="suma" value="20.00" readonly="">
  </div>
<!--For c opne  cQuestion -->
  <div id="cQuestion" style="display:none;"><br/>

   <input type="text" id="suma" name="suma" value="200.00" readonly="">
  </div>
<!--For d opne  dQuestion -->
   <div id="dQuestion" style="display:none;"><br/>

   <input type="text" id="suma" name="suma" value="2000.00" readonly="">
  </div>

Answer 1

Вместо того, чтобы иметь 4 поля ввода для отображения ответа для каждой опции, оставьте один единственный ввод и установите ответ для этого поля ввода на основе выбора. как следует.

function displayQuestion(answer) { 

  document.getElementById('answer').value = answer;
  document.getElementById('aQuestion').style.display='block';

}

<h2>Tip taxa*</h2><br><br>

  <!--Below is html code. -->
<label>
	<!--First input A -->
    <input class="radioo" type="radio" id="a" name="yesOrNo" required="" value="2.00" onchange="displayQuestion(this.value)" />A</label>
  <label><br>
  	<!--Second input B-->
    <input class="radioo" type="radio" id="b" name="yesOrNo" required="" value="20.00" onchange="displayQuestion(this.value)" />B</label><br>
<!--3 input C -->
    <input class="radioo" type="radio" id="c" name="yesOrNo" required="" value="200.00" onchange="displayQuestion(this.value)" />C</label><br>
<!--4 input D-->
    <input class="radioo" type="radio" id="d" name="yesOrNo" required="" value="2000.00" onchange="displayQuestion(this.value)" />D</label><br>
   


</div>


  <div id="aQuestion" style="display:none;"><br/>
    <input type="text" id="answer" name="suma" readonly="true">
  </div>

 </div>

Answer 2

Вы пропустили открывающую метку на C и D

Кстати, у вас не должно быть нескольких одинаковых идентификаторов. Идентификаторы должны оставаться уникальными. :)

function displayQuestion(answer) { 

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

  if (answer == "a") { // hide the div that is not selected

    document.getElementById('bQuestion').style.display = "none";

  }
   if (answer == "b") {

    document.getElementById('aQuestion').style.display = "none";

  }
    
   if (answer == "c") {

    document.getElementById('dQuestion').style.display = "none";

  }

  if (answer == "d") {

    document.getElementById('cQuestion').style.display = "none";

  }


}

<div style="text-align: left;">
  <h2>Tip taxa*</h2><br><br>

  <!--Below is html code. -->
<label>
	<!--First input A -->
    <input class="radioo" type="radio" id="a" name="yesOrNo" required="" value="a" onchange="displayQuestion(this.value)" />A</label>
  <label><br>
  	<!--Second input B-->
    <input class="radioo" type="radio" id="b" name="yesOrNo" required="" value="b" onchange="displayQuestion(this.value)" />B</label><br>
<!--3 input C -->
<label>
    <input class="radioo" type="radio" id="c" name="yesOrNo" required="" value="c" onchange="displayQuestion(this.value)" />C</label><br>
<!--4 input D-->
<label>
    <input class="radioo" type="radio" id="d" name="yesOrNo" required="" value="d" onchange="displayQuestion(this.value)" />D</label><br>
   



</div>

<!--A new one will open for each of the above inputs-->

<!--For a opne  aQuestion -->
  <div id="aQuestion" style="display:none;"><br/>
    <input type="text" id="suma" name="suma" value="2.00" readonly="">
  </div>
<!--For b opne  bQuestion -->
  <div id="bQuestion" style="display:none;"><br/>

   <input type="text" id="suma" name="suma" value="20.00" readonly="">
  </div>
<!--For c opne  cQuestion -->
  <div id="cQuestion" style="display:none;"><br/>

   <input type="text" id="suma" name="suma" value="200.00" readonly="">
  </div>
<!--For d opne  dQuestion -->
   <div id="dQuestion" style="display:none;"><br/>

   <input type="text" id="suma" name="suma" value="2000.00" readonly="">
  </div>