Trying to output value of radio buttons in table list

Question

so I'm trying to output the value from radio buttons into a table, but no matter what I pick it just says 0, and then goes away very quickly. I want the results to stay up but kind of as a vertical list so it would look something like: 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"; } 

So this is just some of the script because it's very long, I'm sure there's an easier way but I'm new to JavaScript. Each radio button is either dis, som, or stron ranging from 1 to 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> 

This is where it outputs to, like I said it keeps saying 0 very quickly and disappearing. Like it's reading all the values as 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> 

And here's a sample of one of the button fieldsets. I appreciate any help. My main focus is getting it to stop reading all the button fields as 0 and going away very quickly.

Sorry I left out that the buttons are in a form that runs when the submit button is clicked. <input type="submit" id="submit" value="submit" onClick="display()"/></td>

Another edit: the entire form

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

Answer 1

For radio buttons, every element should have the same name.Otherwise it won't function properly

Eg:

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

Answer 2

You do not need separate id's, simply make the name property same to act them as a group. You can use querySelectorAll() to select all the radios, then use map() to get all the values. Finally join() them:

 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> 

If you want to get the values on change of the radio try the following:

 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> 

Answer 3

Your main problem was that your form was submitting and therefore the site got reloaded -> all values disappeared.

To fix this, you can either change type="submit" of your button to type="button" or use event.preventDefault() like I did in my example.

You also can shorten your script to something like this:

 function display(event) { // Need "event" to access prevenDefault(); event.preventDefault(); // This line prevents the form from submitting, so your values stay visible after clicking the button var radios = [...document.querySelectorAll('input[type=radio]')]; // Get all your radio buttons at once var displayarea = document.getElementById('displayarea'); var values = radios.map(radio => radio.value).join(' '); // Get all values of your radios and concat them in a string displayarea.innerText = values; } 

 <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(event)" /></td> <!-- Need "event" to access preventDefault();" --> </p> </form> <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> 

Answer 4

add an onchange event to the radio buttons

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

And then write a javascript function to display or do whatever

  function showVal(radio) { // possible things you may do, below are examples alert(radio.value); alert(radio.checked); };