loop through an array of input names and sum the values of any radio buttons which are checked

Question

I need to loop through an array of input names and sum the values of any radio buttons which are checked. I can get it to output a single group but am struggling to handle multiple groups values pulling back.

I used 'document.querySelector('input[name="star1"]:checked').value' to pull back a single value and output it. This worked fine but when i tried to implement it for 4 more additional groups I was getting error after error.

I decided to put the names of the groups into an array so i could loop through all 5 groups. I need it to ignore groups that have no radio button checked to avoid any null value errors.

EDITED: @Zer00ne - I have modified my snippet to show my actual layout.

:root {
  --primary: #0162a4;
  --primary_med: #5084a7;
  --primary_dark: #113255;
  --light: #ffffff;
  --dark: #000000;
  --shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
  --shadow-white: 0px 11px 8px -10px rgba(255, 255, 255, 0.678), 0px -11px 8px -10px rgba(255, 255, 255, 0.678);
  --overlay: rgb(255, 255, 255, 0.15);
  --overlay-blk: rgba(0, 0, 0, 0.15);
  --gradient: linear-gradient(to bottom right, #113255, #0162a4);
}

@font-face {
  font-family: 'walkway';
  src: url('/static/fonts/Walkway_Bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'walkway';
  src: url('/static/fonts/Walkway_Black-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

.wrapper {
  max-width: 1058px;
  margin: auto;
  /*-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;*/
}

.feedback {
  box-sizing: border-box;
  padding-top: 10px;
  font-size: 12px;
  border-radius: 10px;
  background-image: var(--gradient);
  border: 1px solid #000000;
  box-shadow: 2px 4px 8px;
  gap: 10px;
  display: grid;
  grid-template-areas: 'feedMain';
  grid-template-columns: 513px;
  grid-template-rows: 375px;
  width: 534px;
}

.container {
  grid-area: feedMain;
}

.container {
  padding-left: 10px;
  width: 472px;
}

.tabs {
  position: relative;
  margin: 0;
}

.tabs::before,
.tabs::after {
  content: "";
  display: table;
}

.tabs::after {
  clear: both;
}

.tab {
  width: 110px;
  float: left;
  padding-right: 6px;
  Padding-top: 1px;
}

.tab-switch {
  display: none;
}

.tab-label {
  font-family: 'walkway';
  font-weight: bold;
  position: relative;
  display: block;
  height: 32px;
  text-align: center;
  background: var(--primary_dark);
  color: #fff;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.tab-switch:checked+.tab-label {
  color: var(--light);
  border-bottom: 0;
  z-index: 2;
  top: -0.0625rem;
  font-size: 16px;
  font-weight: 700;
}

.tab:first-child .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(59, 81, 110), rgb(62, 84, 117));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab:nth-child(2) .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(64, 91, 122), rgb(63, 88, 123));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab:nth-child(3) .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(61, 91, 127), rgb(64, 92, 128));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab:last-child .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(61, 94, 132), rgb(66, 96, 135));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab-switch:checked+.tab-label+.tab-content {
  z-index: 1;
  opacity: 1;
}

.tab:not(:first-child) .tab-switch:checked+.tab-label+.tab-content {
  border-top-left-radius: 8px;
}

.tab-content {
  height: 12rem;
  position: absolute;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border: 1px solid;
  border-color: #6386b6;
  z-index: 0;
  top: 31px;
  left: 0;
  background-image: linear-gradient(to bottom right, rgb(58, 82, 112), rgb(65, 117, 167));
  opacity: 0;
  height: 300px;
  width: 100%;
  padding: 20px;
  gap: 20px;
}

.rate-form {
  display: grid;
  gap: 20px;
  grid-template-areas: 'question-1 rating1' 'question-2 rating2' 'question-3 rating3' 'question-4 rating4' 'question-5 rating5';
  grid-template-columns: 305px 1fr;
  grid-template-rows: 44.6px 44.6px 44.6px 44.6px 44.6px;
}

.question-1 {
  grid-area: question-1;
}

.question-2 {
  grid-area: question-2;
}

.question-3 {
  grid-area: question-3;
}

.question-4 {
  grid-area: question-4;
}

.question-5 {
  grid-area: question-5;
}

.rating1 {
  grid-area: rating1;
}

.rating2 {
  grid-area: rating2;
}

.rating3 {
  grid-area: rating3;
}

.rating4 {
  grid-area: rating4;
}

.rating5 {
  grid-area: rating5;
}

.question-1,
.question-2,
.question-3,
.question-4,
.question-5 {
  background-color: rgb(255, 255, 255, 0.85);
  border-radius: 25px;
  border: 1px solid;
  border-color: rgb(0, 0, 0);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'walkway';
  font-weight: bold;
  text-align: center;
}

.rating1,
.rating2,
.rating3,
.rating4,
.rating5 {
  justify-content: left;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 44.6px;
  width: 140px;
}

.rating1 input,
.rating2 input,
.rating3 input,
.rating4 input,
.rating5 input {
  display: none;
}

.rating1 label,
.rating2 label,
.rating3 label,
.rating4 label,
.rating5 label {
  float: right;
  font-size: 30px;
  color: lightgrey;
  margin: 0 1px;
  text-shadow: 1px 1px #bbb;
}

.rating1 label:before,
.rating2 label:before,
.rating3 label:before,
.rating4 label:before,
.rating5 label:before {
  content: '★';
}

.rating1 input:checked~label,
.rating2 input:checked~label,
.rating3 input:checked~label,
.rating4 input:checked~label,
.rating5 input:checked~label {
  color: #de4323;
  text-shadow: 1px 1px #2e2e2e;
}

.score-submit {
  display: flex;
  background: var(--primary_dark);
  align-items: center;
  width: 518px;
  height: 70px;
  padding: 8px;
}

.send-button {
  font-family: 'walkway';
  font-weight: bold;
  background-color: var(--light);
  border: 1px solid;
  border-color: #000;
  color: #000;
  padding: 12px 15px;
  font-size: 20px;
  font-weight: 700;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

.time {
  font-family: 'walkway';
  position: relative;
  color: var(--light);
  align-items: center;
  padding-left: 10px;
  padding-top: 10px;
  width: 310px;
  height: 50px;
  text-align: center;
}

.remain,
.countdown {
  align-items: center;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  font-size: 20px;
  height: 20px;
}

.countdown {
  padding-top: 5px;
}

.star-score {
  margin: 0;
  padding-right: 10;
  text-align: left;
}

.star-text {
  font-size: 30px;
  font-family: 'walkway';
  font-weight: bold;
  color: rgb(255, 255, 255);
}


  
    
      
        
        Tab1
        
          
            
              Question 1
            
            
              Question 2
            
            
              Question 3
            
            
              Question 4
            
            
              Question 5
            
            
              
                                            
              
                                            
              
                                            
              
                                            
              
                                            
            
            
              
                                            
              
                                            
              
                                            
              
                                            
              
                                            
            
            
              
                                            
              
                                            
              
                                            
              
                                            
              
                                            
            
            
              
                                            
              
                                            
              
                                            
              
                                            
              
                                            
            
            
              
                                            
              
                                            
              
                                            
              
                                            
              
                                            
            
          
        
      
      
        
        Tab2
         
      
      
        
        Tab3
         
      
      
        
        Tab4
         
      
    
  
  
    
    
      Time Remaining
      00:00
    
    
      0/25

user_19137302 · Answer

The reason why you are getting an error with the loop you are using is because whenever u click a button, it will try to get the value of all buttons (which are not clicked yet at that time).

An easier way to do this, would be to just pass the value of the button in the onclick event. I added this in the html. I also passed the name to make sure only 1 score counts per question.


    
      Question 1
    
    
      Question 2
    
    
      Question 3
    
    
      Question 4
    
    
      Question 5

Your Javascript would look something like this:

var total_score;
var dict = {};
function scoreCount(value, name) {
  dict[name] = parseInt(value);
  total_score = 0;
  for (var score of Object.values(dict)){
        total_score += score;
  }
}

Each time u click a button now, it will add a pair to the dict or replace it if it already exists and recalculate the total score based on the new dict.

user_2813224 · Answer

Update

Adapting Example B was trivial,

The JavaScript is the same as Example A.
Added id="rankings" to
as it was in Example A
Changed the
back to a as it was in Example A
The only thing that's actually different is assigning form="ratings" since it isn't in the .

HTMLFormElement and HTMLFormControlsCollection interfaces are used to reference and form controls.

// Reference a  with id (or name) "ratings"
const ratings = document.forms.ratings;
/*
Reference a form control inside of  with the id/name of "total". Assign it's value
as two spaces.
*/
ratings.total.value = "\u00A0\u00A0";

Don't use inline event handlers use onevent properties or event listeners, here's an onevent property:

/*
Bind "input" event to  invoke scoreCount(e) when "input" event is 
triggered on or within . If any radio button is clicked, scoreCount(e) 
runs. A single line for an unlimited number of form controls. Don't waste your
time typing: onclick="scoreCount(value, name)" 25 times.
*/
ratings.oninput = scoreCount;

Events can bubble from one tag to it's parent and so on making this possible. Indirectly controlling many tags by listening for events with an ancestor tag and excluding and including tags in the event handler is called event delegation. Here's an event handler:

/*
All event handlers pass the Event Object by default. It isn't being used this
time. Instead, "this" is being used which points to the tag bound to the event
which is . 
*/
function scoreCount(e) {
  // Reference all form controls within 
  const IO = this.elements;
  let score = 
    /*
    NodeList of all .checked tags within  converted into an array. The
    output will be coerced into a string (''+)
    */  
    '' + [...this.querySelectorAll(':checked')]
    /*
    On each iteration get the .checked tag's value and coerce it into a (+)
    number. Add that number to the accumulator (sum) (initial value is 0.
    */
    .reduce(
      (sum, chk) => sum + (+chk.value), 0);
    /*
    Take the output from the previous process and display it in . The
    .padStart() keeps a space before the value so there isn't any shifting.
    */
    IO.total.value = score.padStart(2, "\u00A0");
  }

Example A

Example B

const ratings = document.forms.ratings;
ratings.oninput = scoreCount;
ratings.total.value = "\u00A0\u00A0";

function scoreCount(e) {
  const IO = this.elements;
  let score =
    '' + [...this.querySelectorAll(':checked')]
    .reduce(
      (sum, chk) => sum + (+chk.value), 0);
  IO.total.value = score.padStart(2, "\u00A0");
}

:root {
  --primary: #0162a4;
  --primary_med: #5084a7;
  --primary_dark: #113255;
  --light: #ffffff;
  --dark: #000000;
  --shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
  --shadow-white: 0px 11px 8px -10px rgba(255, 255, 255, 0.678), 0px -11px 8px -10px rgba(255, 255, 255, 0.678);
  --overlay: rgb(255, 255, 255, 0.15);
  --overlay-blk: rgba(0, 0, 0, 0.15);
  --gradient: linear-gradient(to bottom right, #113255, #0162a4);
}

@font-face {
  font-family: 'walkway';
  src: url('/static/fonts/Walkway_Bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'walkway';
  src: url('/static/fonts/Walkway_Black-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

.wrapper {
  max-width: 1058px;
  margin: auto;
  /*-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;*/
}

.feedback {
  box-sizing: border-box;
  padding-top: 10px;
  font-size: 12px;
  border-radius: 10px;
  background-image: var(--gradient);
  border: 1px solid #000000;
  box-shadow: 2px 4px 8px;
  gap: 10px;
  display: grid;
  grid-template-areas: 'feedMain';
  grid-template-columns: 513px;
  grid-template-rows: 375px;
  width: 534px;
}

.container {
  grid-area: feedMain;
}

.container {
  padding-left: 10px;
  width: 472px;
}

.tabs {
  position: relative;
  margin: 0;
}

.tabs::before,
.tabs::after {
  content: "";
  display: table;
}

.tabs::after {
  clear: both;
}

.tab {
  width: 110px;
  float: left;
  padding-right: 6px;
  Padding-top: 1px;
}

.tab-switch {
  display: none;
}

.tab-label {
  font-family: 'walkway';
  font-weight: bold;
  position: relative;
  display: block;
  height: 32px;
  text-align: center;
  background: var(--primary_dark);
  color: #fff;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.tab-switch:checked+.tab-label {
  color: var(--light);
  border-bottom: 0;
  z-index: 2;
  top: -0.0625rem;
  font-size: 16px;
  font-weight: 700;
}

.tab:first-child .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(59, 81, 110), rgb(62, 84, 117));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab:nth-child(2) .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(64, 91, 122), rgb(63, 88, 123));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab:nth-child(3) .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(61, 91, 127), rgb(64, 92, 128));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab:last-child .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(61, 94, 132), rgb(66, 96, 135));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab-switch:checked+.tab-label+.tab-content {
  z-index: 1;
  opacity: 1;
}

.tab:not(:first-child) .tab-switch:checked+.tab-label+.tab-content {
  border-top-left-radius: 8px;
}

.tab-content {
  height: 12rem;
  position: absolute;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border: 1px solid;
  border-color: #6386b6;
  z-index: 0;
  top: 31px;
  left: 0;
  background-image: linear-gradient(to bottom right, rgb(58, 82, 112), rgb(65, 117, 167));
  opacity: 0;
  height: 300px;
  width: 100%;
  padding: 20px;
  gap: 20px;
}

.rate-form {
  display: grid;
  gap: 20px;
  grid-template-areas: 'question-1 rating1' 'question-2 rating2' 'question-3 rating3' 'question-4 rating4' 'question-5 rating5';
  grid-template-columns: 305px 1fr;
  grid-template-rows: 44.6px 44.6px 44.6px 44.6px 44.6px;
}

.question-1 {
  grid-area: question-1;
}

.question-2 {
  grid-area: question-2;
}

.question-3 {
  grid-area: question-3;
}

.question-4 {
  grid-area: question-4;
}

.question-5 {
  grid-area: question-5;
}

.rating1 {
  grid-area: rating1;
}

.rating2 {
  grid-area: rating2;
}

.rating3 {
  grid-area: rating3;
}

.rating4 {
  grid-area: rating4;
}

.rating5 {
  grid-area: rating5;
}

.question-1,
.question-2,
.question-3,
.question-4,
.question-5 {
  background-color: rgb(255, 255, 255, 0.85);
  border-radius: 25px;
  border: 1px solid;
  border-color: rgb(0, 0, 0);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'walkway';
  font-weight: bold;
  text-align: center;
}

.rating1,
.rating2,
.rating3,
.rating4,
.rating5 {
  justify-content: left;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 44.6px;
  width: 140px;
}

.rating1 input,
.rating2 input,
.rating3 input,
.rating4 input,
.rating5 input {
  display: none;
}

.rating1 label,
.rating2 label,
.rating3 label,
.rating4 label,
.rating5 label {
  float: right;
  font-size: 30px;
  color: lightgrey;
  margin: 0 1px;
  text-shadow: 1px 1px #bbb;
}

.rating1 label:before,
.rating2 label:before,
.rating3 label:before,
.rating4 label:before,
.rating5 label:before {
  content: '★';
}

.rating1 input:checked~label,
.rating2 input:checked~label,
.rating3 input:checked~label,
.rating4 input:checked~label,
.rating5 input:checked~label {
  color: #de4323;
  text-shadow: 1px 1px #2e2e2e;
}

.score-submit {
  display: flex;
  background: var(--primary_dark);
  align-items: center;
  width: 518px;
  height: 70px;
  padding: 8px;
}

.send-button {
  font-family: 'walkway';
  font-weight: bold;
  background-color: var(--light);
  border: 1px solid;
  border-color: #000;
  color: #000;
  padding: 12px 15px;
  font-size: 20px;
  font-weight: 700;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

.time {
  font-family: 'walkway';
  position: relative;
  color: var(--light);
  align-items: center;
  padding-left: 10px;
  padding-top: 10px;
  width: 310px;
  height: 50px;
  text-align: center;
}

.remain,
.countdown {
  align-items: center;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  font-size: 20px;
  height: 20px;
}

.countdown {
  padding-top: 5px;
}

.star-score {
  margin: 0;
  padding-right: 10;
  text-align: left;
}

.star-text {
  font-size: 30px;
  font-family: 'walkway';
  font-weight: bold;
  color: rgb(255, 255, 255);
}

#total::after {content: '/25'}


  
    
      
        
        Tab1
        
          
            
              Question 1
            
            
              Question 2
            
            
              Question 3
            
            
              Question 4
            
            
              Question 5
            
            
              
                                            
              
                                            
              
                                            
              
                                            
              
                                            
            
            
              
                                            
              
                                            
              
                                            
              
                                            
              
                                            
            
            
              
                                            
              
                                            
              
                                            
              
                                            
              
                                            
            
            
              
                                            
              
                                            
              
                                            
              
                                            
              
                                            
            
            
              
                                            
              
                                            
              
                                            
              
                                            
              
                                            
            
          
        
      
      
        
        Tab2
         
      
      
        
        Tab3
         
      
      
        
        Tab4
         
      
    
  
  
    
    
      Time Remaining
      00:00

loop through an array of input names and sum the values of any radio buttons which are checked

2 Answers

Update

Example A

Example B