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

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

Problem :

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
enter image description here
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”

Comments

Comment posted by Maniraj Murugan

Can you eloborate your requirement?? What actually you need to achieve from the above code given??

Comment posted by Vincent Valvas

Do you want to have the summation of each selected option’s value ?

Comment posted by user3183995

Yes, Vincent Valves. Summation of selected options’ values

Comment posted by ADyson

You said you want “summation of the classname=”30″”…but summation() runs on all the selects, but only 2 of them have classname=30. So you want to collect all the selects, or just the “30” ones? It’s a bit confusing

Comment posted by ADyson

P.S. you should have given that example in the original question, it would have been much clearer! I’ve added it for you.

Comment posted by user3183995

Oh, Thank you! Working! YOU are right! IF Classname’s first letter is number, doesn’t work!!

Comment posted by user3183995

I’m a beginner programmer, so I don’t know exactly how to operate your code.

Comment posted by Sandesh Sapkota

I have done it with the data-num attribute. Select elements must have this attribute. So if the data-num attribute is the same with other select elements, after selecting an item, all values will be added and the total will be console logged.

By