Donc j'essaie de sortir la valeur des boutons radio dans un tableau, mais peu importe ce que je choisis, il dit simplement 0, puis disparaît très rapidement. Je veux que les résultats restent en place, mais en quelque sorte comme une liste verticale, cela ressemblerait à quelque chose comme: 0 1 2 1, etc.

function display()
{
    document.getElementById("displayarea").innerHTML = document.getElementById("dis1").value; 
    document.getElementById("dis1").value = "0";
    document.getElementById("displayarea1").innerHTML = document.getElementById("som1").value; 
    document.getElementById("som1").value = "1";
    document.getElementById("displayarea").innerHTML = document.getElementById("stron1").value; 
    document.getElementById("stron1").value = "2";
  }

Donc, ce n'est qu'une partie du script car il est très long, je suis sûr qu'il existe un moyen plus simple, mais je suis nouveau sur JavaScript. Chaque bouton radio est soit dis, som ou stron allant de 1 à 6.

 <table width="400px" align="center" border=0> 
    <tr style="background-color:#8FBC8F;">
        <td align="center"><b>Results</b></td>
    </tr> 
    <tr>
        <td align="center"><div id="displayarea"></div></td>
    </tr>
 </table>

C'est là qu'il sort, comme je l'ai dit, il continue de dire 0 très rapidement et disparaît. Comme si la lecture de toutes les valeurs était 0.

 <label>I have trouble falling asleep or sleeping too much</label>
 <fieldset class="options2">
     <input type="radio" name="dis2" id="dis2" value="0"/>
     <label>Strongly disagree</label>
     <input type="radio" name="som2" id="som2" value="1"/>
     <label>Somewhat agree</label>
     <input type="radio" name="stron2" id="stron2" value="2"/>
     <label>Strongly agree</label>	
 </fieldset>

Et voici un exemple de l'un des ensembles de champs de bouton. J'apprécie toute aide. Mon objectif principal est de l'arrêter de lire tous les champs de bouton à 0 et de s'en aller très rapidement.

Désolé, j'ai laissé de côté que les boutons sont dans un formulaire qui s'exécute lorsque le bouton d'envoi est cliqué. <input type="submit" id="submit" value="submit" onClick="display()"/></td>

Une autre modification: le formulaire entier

<form id="dep" name="dep">

<fieldset id="depfield">    
<label>I've lost my enthusiasm for life</label>
    <fieldset class="options1">
        <input type="radio" name="dis1" id="dis1" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som1" id="som1" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron1" id="stron1" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

  <label>I have trouble falling asleep or sleeping too much</label>
    <fieldset class="options2">
        <input type="radio" name="dis2" id="dis2" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som2" id="som2" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron2" id="stron2" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

     <label>I have suicidal thoughts</label>
    <fieldset class="options3">
        <input type="radio" name="dis3" id="dis3" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som3" id="som3" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron3" id="stron3" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

     <label>I tend to over-eat or eat too little</label>
    <fieldset class="options4">
        <input type="radio" name="dis4" id="dis4" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som4" id="som4" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron4" id="stron4" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

     <label>I often feel very emotional and upset</label>
    <fieldset class="options5">
        <input type="radio" name="dis5" id="dis5" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som5" id="som5" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron5" id="stron5" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

    <label>I don't put in as much effort as I used to</label>
    <fieldset class="options6">
        <input type="radio" name="dis6" id="dis6" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som6" id="som6" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron6" id="stron6" value="2"/>
        <label>Strongly agree</label>   
    </fieldset> 
</fieldset>
<p>
<input type="submit" id="submit" value="submit" onClick="display()"/></td>
</p>
</form>
1
Jackie 20 nov. 2018 à 10:57

3 réponses

Vous n'avez pas besoin d'identifiants séparés, faites simplement la même propriété name pour les agir en tant que groupe. Vous pouvez utiliser querySelectorAll() pour sélectionner toutes les radios, puis utiliser map() pour obtenir toutes les valeurs. Enfin join():

function display(){
  var el = [...document.querySelectorAll('input[type=radio]')];
  el = el.map(r => r.value).join(' ');
  document.getElementById("displayarea").textContent = el;
}
<table width="400px" align="center" border=0> 
  <tr style="background-color:#8FBC8F;">
  <td align="center"><b>Results</b></td>
  </tr> 
  <tr>
  <td align="center"><div id="displayarea"></div></td>
  </tr>
</table>


<form id="dep" name="dep">

<fieldset id="depfield">    
<label>I've lost my enthusiasm for life</label>
    <fieldset class="options1">
        <input type="radio" name="dis1" id="dis1" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som1" id="som1" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron1" id="stron1" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

  <label>I have trouble falling asleep or sleeping too much</label>
    <fieldset class="options2">
        <input type="radio" name="dis2" id="dis2" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som2" id="som2" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron2" id="stron2" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

     <label>I have suicidal thoughts</label>
    <fieldset class="options3">
        <input type="radio" name="dis3" id="dis3" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som3" id="som3" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron3" id="stron3" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

     <label>I tend to over-eat or eat too little</label>
    <fieldset class="options4">
        <input type="radio" name="dis4" id="dis4" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som4" id="som4" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron4" id="stron4" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

     <label>I often feel very emotional and upset</label>
    <fieldset class="options5">
        <input type="radio" name="dis5" id="dis5" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som5" id="som5" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron5" id="stron5" value="2"/>
        <label>Strongly agree</label>   
    </fieldset>

    <label>I don't put in as much effort as I used to</label>
    <fieldset class="options6">
        <input type="radio" name="dis6" id="dis6" value="0"/>
        <label>Strongly disagree</label>
        <input type="radio" name="som6" id="som6" value="1"/>
        <label>Somewhat agree</label>
        <input type="radio" name="stron6" id="stron6" value="2"/>
        <label>Strongly agree</label>   
    </fieldset> 
</fieldset>
<p>
<input type="button" id="submit" value="submit" onClick="display()"/>
</p>
</form>

Si vous souhaitez obtenir les valeurs lors du changement de la radio, essayez ce qui suit:

document.querySelectorAll('input[name=asleep]').forEach(function(el){
  el.addEventListener('change', display);
});

function display(){
  document.getElementById("displayarea").textContent = this.value; 
}
<table width="400px" align="center" border=0> 
<tr style="background-color:#8FBC8F;">
<td align="center"><b>Results</b></td>
</tr> 
<tr>
<td align="center"><div id="displayarea"></div></td>
</tr>
</table>


<label>I have trouble falling asleep or sleeping too much</label>
<fieldset class="options2">
    <input type="radio" name="asleep" value="0"/>
    <label>Strongly disagree</label>
    <input type="radio" name="asleep" value="1"/>
    <label>Somewhat agree</label>
    <input type="radio" name="asleep" value="2"/>
    <label>Strongly agree</label>   
</fieldset>
1
Mamun 20 nov. 2018 à 08:39

Ajouter un événement onchange aux boutons radio

 <label>I have trouble falling asleep or sleeping too much</label>
 <fieldset class="options2">
     <input type="radio" name="r"  value="0" onchange="showVal(this)"/>
     <label>Strongly disagree</label>
     <input type="radio" name="r"  value="1" onchange="showVal(this)"/>
     <label>Somewhat agree</label>
     <input type="radio" name="r"  value="2" onchange="showVal(this)"/>
     <label>Strongly agree</label>	
 </fieldset>

Et puis écrivez une fonction javascript pour afficher ou faire quoi que ce soit

 function showVal(radio) {
      // possible things you may do, below are examples
       alert(radio.value);
       alert(radio.checked);
    };
0
Subhasish Bhattacharjee 20 nov. 2018 à 08:38

Pour les boutons radio, chaque élément doit avoir le même nom, sinon il ne fonctionnera pas correctement

Par exemple:

<fieldset class="options2">

    <input type="radio" name="nameofradiobutton" id="dis2" value="0"/>
    <label>Strongly disagree</label>
    <input type="radio" name="nameofradiobutton" id="som2" value="1"/>
    <label>Somewhat agree</label>
    <input type="radio" name="nameofradiobutton" id="stron2" value="2"/>
    <label>Strongly agree</label>   

</fieldset>
1
Ashish Kamble 20 nov. 2018 à 08:20