JavaScript - Como calcular inputs de varias tablas

 
Vista:

Como calcular inputs de varias tablas

Publicado por daniel (1 intervención) el 05/10/2021 15:58:17
Estoy desarrollando un formulario en el que tengo 3 tablas.

Tengo que sumar los datos de cada tabla de manera individual y luego estas 3 sumas (1 por tabla) sumarlas entre sí.

Al realizar la suma de una tabla sí me lo hace, pero cuando pongo las tres no lo hace.

He probado a cambiar el script, duplicarlo y cambiar las clases de cada <input> de la tabla pero soy bastante nuevo en esto y la verdad que me he quedado bastante pillado, así que si alguien me puede echar un cable sería genial.

Éste es mi código:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<table border="1" class="colapsado">
            <caption class="titulos"> Predisposición genética </caption>
 
            <tr class="modo1">
                <th> Puntuación </th>
                <th> 0 </th>
                <th> 1 </th>
                <th> 2 </th>
                <th> 3 </th>
                <th> 4 </th>
                <th> puntos </th>
 
            </tr>
 
            <tr>
                <th> ¿Cuál es el color de sus ojos? </th>
                <td> Azul claro, verde, gris</td>
                <td> Azul, gris o verde</td>
                <td> Azul </td>
                <td> Marron oscuro</td>
                <td> Negro </td>
                <td> <input class="txt" type="text" name="txt"   /></td>
 
                 </tr>
                  <tr>
                <th> ¿Cuál es el color natural de su pelo? </th>
                <td> Rojizo</td>
                <td> Rubio</td>
                <td> Castaño, Rubio oscuro </td>
                <td> Marron oscuro</td>
                <td> Negro </td>
                <td>  <input class="txt" type="text" name="txt"   /></td>
 
                 </tr>
                  <tr>
                <th> ¿Cuál es el color de su piel(áreas no expuestas? </th>
                <td> Rojizo</td>
                <td> Muy pálido</td>
                <td> pálido con tinte beige </td>
                <td> Marron clara</td>
                <td> Marron oscura</td>
                <td>   <input class="txt" type="text" name="txt"   /></td>
 
                 </tr>
                  <tr>
                <th> ¿Tiene pecas en las áreas no expuestas? </th>
                <td> Muchas </td>
                <td> Algunas </td>
                <td> Pocas </td>
                <td> Accidental </td>
                <td> No </td>
                <td>  <input class="txt" type="text" name="txt"   /></td>
 
                 </tr>
                     <tr>
    <td>&nbsp;</td>
    <td align="right">Puntuación total por predisposición genética: </td>
    <td align="center"><span id="sum">0</span></td>
</tr>
 
        </table>
     <br/>
 
         <table border="1" class="colapsado">
             <caption> Reacción a la exposición al sol </caption>
 
             <tr class="modo1">
                <th> Puntuación </th>
                <th> 0 </th>
                <th> 1 </th>
                <th> 2 </th>
                <th> 3 </th>
                <th> 4 </th>
                <th> puntos </th>
 
 
            </tr>
 
            <tr>
                <th> ¿Qué ocurre cuando se expone al sol mucho tiempo? </th>
                <td> Enrojecimiento doloroso, ampollas, desescamación </td>
                <td> Ampollas seguidas de peeling </td>
                <td> A veces me quemo y después me pelo </td>
                <td> Rara vez me quemo </td>
                <td> Nunca me he quemado </td>
                 <td> <input class="txt" type="text" name="txt"   /></td>
 
                 </tr>
                  <tr>
                <th> ¿En qué medida se broncea? </th>
                <td> Muy difícil o nunca </td>
                <td> Bronceado ligero </td>
                <td> Bronceado razonable  </td>
                <td> Bronceado muy fácil </td>
                <td> Muy bronceado muy rápido </td>
               <td>   <input class="txt" type="text" name="txt"   /></td>
 
                 </tr>
                  <tr>
                <th> ¿Se broncea después de varias horas de exposición al sol? </th>
                <td> Nunca</td>
                <td> Rara vez </td>
                <td> a veces </td>
                <td> A menudo </td>
                <td> Siempre </td>
               <td>   <input class="txt" type="text" name="txt"   /></td>
 
                 </tr>
                  <tr>
                <th> ¿Como reacciona su cara al sol? </th>
                <td> Muy sensible </td>
                <td> Sensible </td>
                <td> Normal </td>
                <td> Muy resistente </td>
                <td> Nunca he tenido problemas </td>
                <td >  <input class="txt" type="text" name="txt"   /></td>
 
                 </tr>
                      <tr>
    <td>&nbsp;</td>
    <td align="right">Puntuación total por Reacción a la exposición al sol :</td>
    <td align="center"><span id="sum">0</span></td>
</tr>
 
 
         </table>
 
                  <table border="1" class="colapsado">
                      <caption> hábitos de bronceado </caption>
 
            <tr class="modo1">
                   <th> Puntuación </th>
                <th> 0 </th>
                <th> 1 </th>
                <th> 2 </th>
                <th> 3 </th>
                <th> 4 </th>
                <th> puntos </th>
 
 
            </tr>
 
            <tr>
                <th> ¿Cuándo tomó el sol por última vez (o lámpara UVA o crema autobronceadora? </th>
                <td> Hace más de 3 meses</td>
                <td> hace 2-3 meses </td>
                <td> Hace 1-2 meses  </td>
                <td> Hace menos de 1 mes</td>
                <td> Hace menos de 2 semanas </td>
                <td>   <input class="txt" type="text" name="txt"   /></td>
<br/>
                 </tr>
                  <tr>
                <th> ¿Expuso el área a tratar al sol? </th>
                <td> Nunca</td>
                <td> Casi nunca</td>
                <td> A veces </td>
                <td> A menudo </td>
                <td> Siempre </td>
                <td> <input class="txt" type="text" name="txt"   /></td>
 
 
                 </tr>
               <tr>
    <td>&nbsp;</td>
    <td align="right">Puntuación total por hábitos de bronceado: </td>
    <td align="center"><span id="sum">0</span></td>
</tr>
 
                  </table>
El script que tengo es el que adjunto abajo, pero una tabla me la hace, más de una no y ni idea de porqué. Gracias de antemano.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(".txt").each(function() {
 
        $(this).keyup(function(){
            calculateSum();
        });
    });
 
function calculateSum() {
 
    var sum = 0;
 
    $(".txt").each(function() {
 
      var value = $(this).text();
 
if(!isNaN(value) && value.length != 0) {
    sum += parseFloat(value);
}});
 
 
    $("#sum").html(sum.toFixed(0));
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de algoritmo
Val: 37
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como calcular inputs de varias tablas

Publicado por algoritmo (29 intervenciones) el 05/10/2021 22:13:04
Hola

El atributo 'id' debe tener un valor único. Es decir, no puede haber 2 'id' con el mismo valor.
Tu tienes id="sum" repetido varias veces, por lo que la asignación del valor de la suma la hace a una de ellas.

Espero que te sirva :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar