J'ai un petit problème, car je suis débutant en JS. J'ai 4 entrées. Une autre entrée s'ouvrira pour chacun. En a et b, cela fonctionne. Je veux dire, si j'ai 2 entrées, je sais comment le faire. Lorsque j'ouvre l'entrée aQuestion, elle s'ouvre. et en b c'est pareil. Le problème est à c et d, c'est à dire si j'ai plus de 2 entrées. J'ai essayé, mais ça ne marche pas ...

Merci beaucoup!

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>
0
Darius Perta 25 avril 2020 à 14:01

2 réponses

Meilleure réponse

Au lieu d'avoir 4 champs d'entrée pour afficher la réponse pour chaque option, conservez une seule entrée et définissez la réponse sur ce champ d'entrée en fonction de la sélection. comme suit.

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>
0
ThilankaD 25 avril 2020 à 11:25

Vous avez manqué la balise d'étiquette d'ouverture sur C et D

Au fait, vous ne devriez pas avoir plusieurs identifiants identiques. Les identifiants doivent rester uniques. :)

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>
0
Etienne Bibaud 25 avril 2020 à 11:27