How can I shorten this JavaScript code?

Question

I am a beginner to JavaScript. I need a function that adds the value of all three groups of radio buttons selected as shown in the image attached. See the image below. I have tried the code as shown below.

This is how the selection options look

      function nodisplay(){

        // getting the values of all radio buttons using id

        var opt1 = document.getElementById("option1");
        var opt2 = document.getElementById("option2");              
        var opt3 = document.getElementById("option3");              
        var opt4 = document.getElementById("option4");              
        var opt5 = document.getElementById("option5");              
        var opt6 = document.getElementById("option6");              
        var opt7 = document.getElementById("option7");
        var opt8 = document.getElementById("option8");
        var opt9 = document.getElementById("option9");
        var opt10 = document.getElementById("option10");
        var drap = document.getElementById("totally");

// add all the options that is currently selected and output is placed in another div

        if(opt1.checked){
          drap.innerHTML = parseInt(opt1.value);

        } if(opt1.checked && opt3.checked){
          drap.innerHTML = parseInt(opt1.value) + parseInt(opt2.value);

        }if(opt1.checked && opt3.checked && opt8.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt3.value) + parseInt(opt8.value); 

         }if(opt1.checked && opt4.checked && opt8.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt4.value) + parseInt(opt8.value);

         } if(opt1.checked && opt5.checked && opt8.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt5.value) + parseInt(opt8.value);

         } if(opt1.checked && opt6.checked && opt8.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt6.value) + parseInt(opt8.value);

         } if(opt1.checked && opt7.checked && opt8.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt7.value) + parseInt(opt8.value);

         } if(opt1.checked && opt3.checked && opt9.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt3.value) + parseInt(opt9.value); 

         } if(opt1.checked && opt4.checked && opt9.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt4.value) + parseInt(opt9.value);

         } if(opt1.checked && opt5.checked && opt9.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt5.value) + parseInt(opt9.value);

         } if(opt1.checked && opt6.checked && opt9.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt6.value) + parseInt(opt9.value);

         } if(opt1.checked && opt7.checked && opt9.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt7.value) + parseInt(opt9.value);

         } if(opt1.checked && opt3.checked && opt10.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt3.value) + parseInt(opt10.value); 

         } if(opt1.checked && opt4.checked && opt10.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt4.value) + parseInt(opt10.value);

         } if(opt1.checked && opt5.checked && opt10.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt5.value) + parseInt(opt10.value);

         } if(opt1.checked && opt6.checked && opt10.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt6.value) + parseInt(opt10.value);

         } if(opt1.checked && opt7.checked && opt10.checked){
            drap.innerHTML = parseInt(opt1.value) + parseInt(opt7.value) + parseInt(opt10.value);

         }

      }

    </script>

I think that storing all the selected radio buttons value in an array and then adding the subsequent array elements based on selection would work, but i do not know how to execute it. Here is the HTML code as well

 <div class="radio">
  <input type="radio" id="option1" name="optradio" onchange="nodisplay()" value="3000">   <label> Gallery Wrap </label>   </div>


 <div class="radio">   <input type="radio" id="option3" value="700" name="optradio2" onclick="nodisplay()"> <label>20x16 </label>  </div>

<div class="radio">  <input type="radio" id="option4" value="900" name="optradio2" onclick="nodisplay()"> <label>24x19   </label>   </div>

<div class="radio">   <input type="radio" id="option5" value="1150" name="optradio2" onclick="nodisplay()"> <label>30x24 </label> </div>

 <div class="radio">   <input type="radio" id="option6" value="2340" name="optradio2" onclick="nodisplay()"> <label>36x29 </label>  </div>

Considering the if-statements have a lot of different conditions which are not necessarily alike (Eg. 1, 5 and 9 or 1, 7 and 10) it is difficult to write this very short. — Lesleyvdp, Aug 27 '18 at 13:24

l2aelba · Answer 1 · 2018-08-27T13:45:48.587

0

What's about something like this? (Example)

function nodisplay() {
    var el1 = document.querySelector('input[name="optradio1"]:checked');
    var el2 = document.querySelector('input[name="optradio2"]:checked');
    var el3 = document.querySelector('input[name="optradio3"]:checked');
    var r1 = el1 ? parseInt(el1.val) : 0;
    var r2 = el2 ? parseInt(el2.val) : 0;
    var r3 = el3 ? parseInt(el3.val) : 0;
    document.getElementById('totally').innerHTML = r1 + r2 + r3;
}

edited Aug 27 '18 at 13:45

answered Aug 27 '18 at 13:30

l2aelba

21,591
22
102
138

@l2aelba Thanks a lot. It does sum up all the values. I need to show the total even if just r1 or r2 or r3 is selected or in any combination. One selection per row as shown in the picture. Also could you please tell me what does 10 do in this expression – Mohammed Raees Nazeem Aug 27 '18 at 13:43
@MohammedRaeesNazeem you dont ready need it https://stackoverflow.com/questions/6611824/why-do-we-need-to-use-radix – l2aelba Aug 27 '18 at 13:44
Thanks a lot. It does work now. Though val had to be value actually. – Mohammed Raees Nazeem Aug 27 '18 at 14:10

How can I shorten this JavaScript code?

1 Answers1