Easier Way to ParseInt

Question

I'm working on this page that's going to calculate data

If I use document.querySelector("[name=\\"st1\\"]:checked").value; it is string, so I have to do

var res1 = document.querySelector("[name=\"st1\"]:checked").value;
var res1_p = parseInt(res1);

But considering that I have 100 questions, it takes a lot of time.

I wonder if there is something that I might do to improve / speed up the process?

Full code below

var res1 = document.querySelector("[name=\"st1\"]:checked").value;
var res1_p = parseInt(res1);
var res2 = document.querySelector("[name=\"st2\"]:checked").value;
var res2_p = parseInt(res2);
var res3 = document.querySelector("[name=\"st3\"]:checked").value;
var res3_p = parseInt(res3);
var res4 = document.querySelector("[name=\"st4\"]:checked").value;
var res4_p = parseInt(res4);
var res5 = document.querySelector("[name=\"st5\"]:checked").value;
var res5_p = parseInt(res5);
var res6 = document.querySelector("[name=\"st6\"]:checked").value;
var res6_p = parseInt(res6);
var res7 = document.querySelector("[name=\"st7\"]:checked").value;
var res7_p = parseInt(res7);
var res8 = document.querySelector("[name=\"st8\"]:checked").value;
var res8_p = parseInt(res8);
var res9 = document.querySelector("[name=\"st9\"]:checked").value;
var res9_p = parseInt(res9);
var res10 = document.querySelector("[name=\"st10\"]:checked").value;
var res10_p = parseInt(res10);
var res11 = document.querySelector("[name=\"st11\"]:checked").value;
var res11_p = parseInt(res11);
var res12 = document.querySelector("[name=\"st12\"]:checked").value;
var res12_p = parseInt(res12);
var res13 = document.querySelector("[name=\"st13\"]:checked").value;
var res13_p = parseInt(res13);
var res14 = document.querySelector("[name=\"st14\"]:checked").value;
var res14_p = parseInt(res14);
var res15 = document.querySelector("[name=\"st15\"]:checked").value;
var res15_p = parseInt(res15);
var res16 = document.querySelector("[name=\"st16\"]:checked").value;
var res16_p = parseInt(res16);
var res17 = document.querySelector("[name=\"st17\"]:checked").value;
var res17_p = parseInt(res17);
var res18 = document.querySelector("[name=\"st18\"]:checked").value;
var res18_p = parseInt(res18);
var res19 = document.querySelector("[name=\"st19\"]:checked").value;
var res19_p = parseInt(res19);
var res20 = document.querySelector("[name=\"st20\"]:checked").value;
var res20_p = parseInt(res20);
var res21 = document.querySelector("[name=\"st21\"]:checked").value;
var res21_p = parseInt(res21);
// Calculate 
var BDI_score = res1_p + res2_p + res3_p + res4_p + res5_p + res6_p + res7_p + res8_p + res9_p + res10_p + res11_p + res12_p + res13_p + res14_p + res15_p + res16_p + res17_p + res18_p + res19_p + res20_p + res21_p;

Answer 1

Use a loop with a template string for the index, if you don't need to store individual values:

var BDI_score = 0;

for(var i = 1; i <= 21; i++) {
  var res = document.querySelector(`[name="st${i}"]:checked`).value;
  BDI_score += parseInt(res);
}

Answer 2

You can use a array data structure to store all the values then loop over the array to parse the value into integer and sum it.

var resArray = [];
var BDI_score = 0;
for(var i=1; i<=22; i++){
  var elem = document.querySelector("[name=\"st"+i+"\"]:checked").value;
  resArray.push(parseInt(elem));
  BDI_score += resArray[i];
}

Storing the parsed value in resArray will help you to get the value of the respective name by accessing the index of the array. For example: the value for name = st14 is always in index 13 (one less than the number 14), for name = st16 is always in index 15 and so on.

Answer 3

You can store your results in an Array if you ever need them for later, and make your selector dynamic inside a for loop.

+var converts var into a Number , just as parseInt(var) does.

var arr = [];
var sum = 0;

for(var i=1; i<=100; i++){
  arr[i] = +document.querySelector("[name=\"st"+i+"\"]:checked").value;
  sum+= arr[i];
}