How can javascript collect values from the same classname in select-option?

Question

I made table for the individual summation of the same classnames as like '30', '60'...

<td>
    <select onchange='summation()' class='30' name='Cr'>
        <option value=0>>15.0</option>
        <option value=1>10.0/15.0</option>
        <option value=2><5.0</option>
        <option value=3>5.0/10.0</option>
</td>
<td>
    <select onchange='summation()' class='30' name='WBC'>
        <option value=0><2000</option>
        <option value=1>2000~4000</option>
        <option value=2> >10000</option>
        <option value=3>4000~10000</option>
</td>
<td>
    <select onchange='summation()' class='90' name='post-BUN'>
        <option value=0>>24</option>
        <option value=1><20</option>
        <option value=2>20/24</option>
</td>
<td>
    <select onchange='summation()' class='180' name='HBsAg'>
        <option value=0>posi</option>
        <option value=3>nega</option>
</td>

In Browser, that code's displaying below I made javascript as below. Classname ='30' values are the collection of object.

function summation() {
  var x = document.getElementsByClassName("30");
    ???????????
 document.getElementById("30").innerHTML = x.valueOf();

How can I get the summation of the classname="30" from the that code?

When option selected, I want the sum of the values of the classname '30'. In here, 3 and 2 selected, the sum will be 5. I want That sum "5"

Answer 1

I think this is probably what you want, but it's a tiny bit unclear from the requirements. (I'm unsure why you run the "summation" function on the last two selects when you are not including them in the calculation.)

From a code point of view, querySelectorAll is used to find all elements with the same class. The advantage of this vs getElementsByClassName is that you can then easily loop over the items with a forEach as I have done.

Note that I had to alter your class names slightly because JavaScript complains about an invalid selector when the class name starts with a number. But this is a trivial change.

 function summation() { var x = document.querySelectorAll(".select30"); var total = 0; x.forEach(function(item) { total += parseInt(item.value); }); console.log("Total: " + total); }

 <table> <tr> <td> <select onchange='summation()' class='select30' name='Cr'> <option value=0>&gt;15.0</option> <option value=1>10.0/15.0</option> <option value=2>&lt;5.0</option> <option value=3>5.0/10.0</option> </td> <td> <select onchange='summation()' class='select30' name='WBC'> <option value=0> <2000</option> <option value=1>2000~4000</option> <option value=2> &gt;10000</option> <option value=3>4000~10000</option> </td> <td> <select onchange='summation()' class='select90' name='post-BUN'> <option value=0>>24</option> <option value=1> <20</option> <option value=2>20/24</option> </td> <td> <select onchange='summation()' class='select180' name='HBsAg'> <option value=0>posi</option> <option value=3>nega</option> </td> </tr> </table>

Answer 2

After agreeing with ADyson and trying to do without a class name and but with data attribute here is what I have done.

 const selectItems = document.querySelectorAll("select"); // selecting all select elements selectItems.forEach(selectItem => { // looping through all select elements selectItem.addEventListener("change", function() { // calling a function on change let dataNumber = this.dataset.num; summation(dataNumber); // passing the value of data-num to find next elements which has same data-num }); }); function summation(dataNumber) { const allElements = document.querySelectorAll("[data-num]"); // selecting all elements that has data-num attribute const allElementsWithSameDataNumber = []; // to store all elements that has same data-num allElements.forEach(select => { if (select.dataset.num === dataNumber) { allElementsWithSameDataNumber.push(select); } }); // Calculating the value of same data-number's select elements let value = 0; allElementsWithSameDataNumber.forEach(cur => { value = parseInt(cur.value) + value; }); console.log(value); }

 <select data-num="30" name="Cr"> <option value="10">10</option> <option value="1">1</option> </select> <select data-num="30" name="WBC"> <option value="3">3</option> <option value="2"> >2</option> </select> <select data-num="180" name="WBC"> <option value="3">3</option> <option value="2"> >2</option> </select> <select data-num="180" name="WBC"> <option value="8">8</option> <option value="2"> >2</option> </select>