Fügen Sie Werte der Eingabe der gleichen Klasse Javascript

Question

Wie füge ich Werte der Eingabe der gleichen Klasse. Ich habe den folgenden Code ausprobiert, scheint aber nicht zu funktionieren. Wo gehe ich falsch?

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

Answer 1

Hier

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

Ihre tdsCompulsory ist ein einzelnes Element, da Sie [0] Element erhalten.

Code ändern zu

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

oder verwenden foreach Methode

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

Answer 2

dies versuchen, verwenden querySelectorAll, Sie werden alle Elemente im Dokument mit class = "compulsory1" erhalten:

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

Sie mögen unter Verwendung von jQuery schreiben:

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

Danke, Ravi

Answer 4

In Ihrer Lösung tdsCompulsory ist kein Array, es ist nur eine Reihe von ersten Elements (Eingang).

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>

.