Foros del Web » Programando para Internet » Javascript »

Un getElementById dinamico realizar suma

Estas en el tema de Un getElementById dinamico realizar suma en el foro de Javascript en Foros del Web. Como puedo hacer esto dinamico ? Yo capturo datos a traves del textfield, la cosa es que los textfield son dinamicos pueden ser 1 o ...
  #1 (permalink)  
Antiguo 10/09/2011, 20:01
 
Fecha de Ingreso: marzo-2010
Mensajes: 432
Antigüedad: 14 años, 9 meses
Puntos: 11
Un getElementById dinamico realizar suma

Como puedo hacer esto dinamico ?

Yo capturo datos a traves del textfield, la cosa es que los textfield son dinamicos pueden ser 1 o 6 o más textfield.




Por ejemplo este es mi codigo estatico y funciona bien.


Código Javascript:
Ver original
  1. var numero1 = document.getElementById('textfield1').value;  
  2. var numero2 = document.getElementById('textfield2').value;  
  3.    
  4. var resultado = numero1 + numero2;
  5.  
  6. document.getElementById('resultado').value = resultado;


Como puedo hacer la suma dinamica ??
__________________
Libro de HTML 5 + codigo fuente bajar aqui.
  #2 (permalink)  
Antiguo 10/09/2011, 20:09
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Un getElementById dinamico realizar suma

buenas,
yo te recomendaría que en lugar de asignar IDs, asignes un mismo valor al atributo name para todos los campos. luego lo obtienes a manera de array con document.getElementsByName. finalmente recorres el array con un bucle sumando cada value a una variable. recuerda convertir el value a tipo numérico (parseInt) antes de realizar la suma, de lo contrario estarias realizando una concatenación de string.

__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 10/09/2011, 20:48
 
Fecha de Ingreso: marzo-2010
Mensajes: 432
Antigüedad: 14 años, 9 meses
Puntos: 11
Respuesta: Un getElementById dinamico realizar suma

No se como usar el getElementsByName, bueno este es el codigo que tengo:

Código Javascript:
Ver original
  1. <?php
  2.  
  3. include("conexion.php");
  4. $link=Conectarse();
  5.  
  6. echo "
  7. <script language='JavaScript' type='text/javascript'>  
  8. function suma(){
  9.    
  10. var capacidad=4;
  11. var i=0;
  12. var textfield = new Array();
  13. while (i < capacidad) {
  14.    textfield[i] = document.getElementById('textfield['+i+']').value;
  15.    
  16.     alert(textfield[i].value);
  17.    i++;
  18. }
  19.    
  20. }      
  21.  
  22. </script>  
  23. ";
  24.  
  25.  
  26. $result=mysql_query("select * from articulos",$link);
  27.  
  28.  
  29. $x=0;
  30. while($row = mysql_fetch_array($result)) {
  31. $nombre = $row["nombre"];
  32. $precio = $row["precio"];
  33.  
  34. echo "$nombre <input type=\"text\" value=\"textfield$x\" id=\"textfield$x\"/><br>";
  35.  
  36. $x++;
  37. }
  38.  
  39. echo "<br>";
  40. echo "El total es: <input type='text' id='resultado'><br>";
  41.  
  42. echo "<br>";
  43.  
  44. echo " <input type='button' name='Submit' value='Sumar' onclick='suma()'> ";
  45.  
  46. mysql_close($link);
  47.  
  48. ?>
__________________
Libro de HTML 5 + codigo fuente bajar aqui.
  #4 (permalink)  
Antiguo 10/09/2011, 21:14
 
Fecha de Ingreso: marzo-2010
Mensajes: 432
Antigüedad: 14 años, 9 meses
Puntos: 11
Respuesta: Un getElementById dinamico realizar suma

Tengo algo de codigo con el getElementsByName pero no funciona, siempre da como resultado cero. No suma los valores de los Input


Código Javascript:
Ver original
  1. <script language="javascript">
  2.  
  3. function sumar()
  4. {
  5. var total = 0;
  6. var coleccion = document.getElementsByName("myInput[]");
  7.  
  8. for (i = 0; elem = coleccion[i]; i++) {
  9.  
  10.     total += (parseInt(elem[i].value));
  11.    
  12. }
  13.  
  14. alert(total);
  15.  
  16.    
  17. }
  18.  
  19. </script>
  20.  
  21.  
  22. <input name="myInput" type="text" value="1" size="20"><br>
  23. <input name="myInput" type="text" value="2" size="20"><br>
  24. <input name="myInput" type="text" value="4" size="20"><br>
  25. <br>
  26. <input name="mybutton" type="button" onclick="sumar()">
__________________
Libro de HTML 5 + codigo fuente bajar aqui.
  #5 (permalink)  
Antiguo 10/09/2011, 21:29
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Un getElementById dinamico realizar suma

var coleccion = document.getElementsByName("myInput[]");
fijate el string que estas pasando a la funcion... no coincide con el name de los campos.

for (i = 0; elem = coleccion[i]; i++) {
total += (parseInt(elem[i].value));
elem es una referencia de un elemento del array, por lo que no tiene sentido tratarlo nuevamente como array. en otras palabras, elem es el campo en si.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #6 (permalink)  
Antiguo 10/09/2011, 21:37
 
Fecha de Ingreso: marzo-2010
Mensajes: 432
Antigüedad: 14 años, 9 meses
Puntos: 11
Respuesta: Un getElementById dinamico realizar suma

muchas gracias zerokilled ahora funciona ....

__________________
Libro de HTML 5 + codigo fuente bajar aqui.

Etiquetas: dinamico, getelementbyid, realizar, suma
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:25.