Calculate the sum of input values in a JavaScript function with the same class

Question

Calculate the sum of input values in a JavaScript function with the same class

Can anyone help me figure out how to sum the values of input fields with the same class? I've attempted the code below but it doesn't seem to be working. Any ideas on what I'm doing 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>

javascript arrays

Answer 1

Answer №1

Give this a shot: try using querySelectorAll. By doing so, you can retrieve all elements in the document that have the 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" />

Answer 2

Give this a shot: try using querySelectorAll. By doing so, you can retrieve all elements in the document that have the 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" />

Answer 3

Answer №2

It appears that tdsCompulsory in your solution is not an array, but rather a number corresponding to the 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>

.

Answer 4

It appears that tdsCompulsory in your solution is not an array, but rather a number corresponding to the 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>

.

Answer 5

Answer №3

Here

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

Your variable tdsCompulsory contains a single element, as you are accessing the element at index [0].

To modify your code:

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);

Alternatively, you can use the forEach method:

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

Answer 6

Here

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

Your variable tdsCompulsory contains a single element, as you are accessing the element at index [0].

To modify your code:

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);

Alternatively, you can use the forEach method:

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

Answer 7

Answer №4

If you want to use jQuery to achieve the same output, you can follow the code snippet below:


  <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>
    </tr>
  </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>

Best regards, Ravi

Answer 8

If you want to use jQuery to achieve the same output, you can follow the code snippet below:


  <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>
    </tr>
  </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>

Best regards, Ravi

Calculate the sum of input values in a JavaScript function with the same class

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Adjusting a Vue Slider with a changing value

Refreshing select2 dropdown options dynamically with AJAX updates

Having trouble with flash messages in Node.js?

Keep an eye out for classes that are added dynamically

Link that updates periodically linked to an image

JavaScript: Move the cursor to a specified position while updating the input value

Could anyone assist me in finding a way to exclude a particular "class" from being iterated over while utilizing ng-repeat in Angularjs?

The transformation of elements within a C array may appear peculiar

Error: Google Chrome Extension must be used on the Dev Channel or a newer version

Commence the list from the lowest point

react native is not updating the view even though the state has been changed

Having trouble populating an OnsenUI list with AngularJS parse in Cordova

Acquire a structured list of the focus order within the DOM elements

Why is Validators.pattern not functioning in production when it works perfectly in my local development environment for Angular?

There was an issue with the v-on handler that threw an error: "Error: Reference.set failed because the first argument contains undefined."

Executing a search and replace function using a delay within a foreach loop - the ultimate guide

Discover the art of extracting various words from a string in Java

Error encountered while attempting to install material-ui v3.0.3 due to an unexpected termination of the JSON input

What could be the reason for my empty $routeProvider?

Determination of the winner in a tic tac toe game is not accurate using the if statement