Add values of input of same class javascript

Question

How do i add values of input of same class. I have tried the code below but doesn't seem to work. Where am i going wrong?

<table id="tableID">
<tr>

<td>   <input name="name" class="compulsory1" type="text" value="1" />  </td>
<td>   <input name="name1" class="compulsory1" type="text" value="2" />  </td>
<td>   <input name="name2" class="compulsory1" type="text" value="3" />  </td>

<td>
<script type="text/javascript">
var tdsCompulsory = document.getElementsByClassName('compulsory1')[0].value;
var cData = [];
sum = 0;
for(var i in tdsCompulsory){
    if(typeof tdsCompulsory[i].textContent != 'undefined')
    cData.push(tdsCompulsory[i].textContent);
}
console.log(cData);

for(var i in cData){
    sum +=parseInt(cData[i]);
}
alert (sum);
</script>

</td>

</tr>
</table>

rejo · Accepted Answer · 2016-07-29 08:36:14Z

2

try this , use querySelectorAll , You will get all elements in the document with class="compulsory1":

window.onload = function(){
var x = document.querySelectorAll(".compulsory1");
var total = 0;
for(var i=0;i<x.length;i++)
{
total+=Number(x[i].value);
}
console.log(total);
}

  <input name="name" class="compulsory1" type="text" value="1" /> 
  <input name="name1" class="compulsory1" type="text" value="2" /> 
  <input name="name2" class="compulsory1" type="text" value="3" />

edited Jul 29, 2016 at 8:36

answered Jul 29, 2016 at 8:30

rejo

3,3405 gold badges29 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nataliya U · Accepted Answer · 2016-07-29 08:39:06Z

2

In your solution tdsCompulsory is not a array, it's just a number of first element(input).

var tdsCompulsory = document.getElementsByClassName('compulsory1');
var len = tdsCompulsory.length;
var cData = [];
sum = 0;
for(var i = 0; i < len; i++){
    cData.push(tdsCompulsory[i].value);
    sum += +tdsCompulsory[i].value 
}
alert (sum);

<table id="tableID">
<tr>

<td>   <input name="name" class="compulsory1" type="text" value="1" />  </td>
<td>   <input name="name1" class="compulsory1" type="text" value="2" />  </td>
<td>   <input name="name2" class="compulsory1" type="text" value="3" />  </td>

<td>

.

answered Jul 29, 2016 at 8:39

Nataliya U

1412 silver badges6 bronze badges

Comments

Suren Srapyan · Accepted Answer · 2016-07-29 08:36:21Z

1

Here

var tdsCompulsory = document.getElementsByClassName('compulsory1')[0].value;

your tdsCompulsory is a single element, because you get [0] element.

Change your code to

var tdsCompulsory = document.getElementsByClassName('compulsory1');

for(var i = 0; i < tdsCompulsory.length; i++){
    if(typeof tdsCompulsory[i].value != undefined){
       cData.push(tdsCompulsory[i].textContent);
    }
}

    console.log(cData);

for(var i in cData){
    sum +=parseInt(cData[i]);
}
alert (sum);

or use foreach method

[].foreach.apply(tdsCompulsory, (el) => {
   if(typeof tdsCompulsory[i].value != undefined){
        cData.push(tdsCompulsory[i].value);
     }
});

edited Jul 29, 2016 at 8:36

answered Jul 29, 2016 at 8:24

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

2 Comments

Omari Victor Omosa Over a year ago

Does that capture the values?

Omari Victor Omosa Over a year ago

When i use ur code like this. it doesnt alert total. could you help with a jsfiddle

<script type="text/javascript"> var tdsCompulsory = document.getElementsByClassName('compulsory1').value; for(var i = 0; i < tdsCompulsory.length; i++){     if(typeof tdsCompulsory[i].textContent != 'undefined')     cData.push(tdsCompulsory[i].textContent); } console.log(cData); sum = 0; for(var j in cData){     sum +=parseInt(cData[j]); } alert (sum);  </script>

Tomislav Stankovic · Accepted Answer · 2016-07-29 09:02:18Z

1

You can write like below using jQuery:

   <table id="tableID">
                <tr>
                <td>   <input name="name" class="compulsory1" type="text" value="1" />  </td>
                <td>   <input name="name1" class="compulsory1" type="text" value="2" />  </td>
                <td>   <input name="name2" class="compulsory1" type="text" value="3" />  </td>
                <td>
        </table>
        <input type="Button" value="Show Sum" onclick="sumAll()">


     <script> 
        function sumAll(){
            var values = $('.compulsory1');
            var sum = 0;
            for (var i =0; i<values.length; i++) {
            console.log(values[i]);
            sum += parseInt($(values[i]).val());
        }
        alert(sum);
     }
    </script>

Thanks, Ravi

edited Jul 29, 2016 at 9:02

Tomislav Stankovic

3,12417 gold badges38 silver badges43 bronze badges

answered Jul 29, 2016 at 8:35

Ravi Koradia

9697 silver badges15 bronze badges

Collectives™ on Stack Overflow

Add values of input of same class javascript

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related