[SOLUCIONADO] Sumar multiples variables

[zerobathory]

Hola, buenas tardes, tengo un problema con el que espero puedan ayudarme, estoy generando una aplicacion web, en la cual tengo que sumar multiples variables, el problema es que tecnicamente no se sabe cuantas variables van a ser, puede ser desde una, hasta 10 o mas, ya que se van a sumar precios de refacciones, entonces el usuario añade una refaccion y muestra el precio de esa refaccion, puede agregar tantas refacciones quiera el usuario, y al final todos esos precios se tiene que sumar.

Lo que estoy haciendo es que en input pongo todos los precios con un id, y tengo un input en blanco para que ahi muestre el resultado, los precios de las refacciones los recojo mediante una funcion javascript con getElementById , intentaba hacer mediante un for en javascript recoger todos los id en caso de que existan, pero no se bien como hacerlo, primero pongo la forma en la que se imprimen las refacciones con el precio, eso es en php

Código PHP:

<?php 
$conref="SELECT * FROM ".$prefijo_tabla."_refacciones INNER JOIN ".$prefijo_tabla."_inventario ON ".$prefijo_tabla."_refacciones.idideninventario=".$prefijo_tabla."_inventario.idinventario WHERE ididentiorden='".$arrorden['idrefaccion']."'";
                                                                      $queryref=$con->query($conref);
                                                                      if($queryref->rowcount() > 0 ){
                                                                        
                                                                                for($x=1; $x<=$queryref->rowcount(); $x++){
                                                                                        $arrayref=$queryref->fetch(PDO::FETCH_ASSOC);
                                                                                        echo"<tr><td>".$arrayref['nombreinventario']."</td><td><input type='text' readonly='readonly' id='$x' value='".$arrayref['precio']."' class='form-control'></td><td><a href='?v=bor&refaccion=".$arrayref['idrefa']."&prefijo=$prefijo_tabla'>Eliminar</a></td></tr>";
                                                                                } ?>
                                                                                <input type="hidden" id="controlador" value="<?php echo $queryref->rowcount(); ?>"> 
                                                                        
                                                                    <?php   } ?>
 
<tr>
                                <td>Total</td>
                                <td><input type="text" class="form-control" readonly="readonly" id="total"></td>
                        </tr>
 

En el campo oculto que dice "controlador" pongo el numero de refacciones que coloca el usuario, ahora coloco el codigo javascript como pensaba hacerlo:

Código Javascript:

function sumarcampos() {
        for (x=0;x<=cont;x++) {
                var resX=document.getElementById(X).value;
                
        }
                resf=parseInt(resX) + parseInt(resX);
        document.getElementById("total").value=resf;
}
 

Dentro del FOR pueden darse cuenta que pongo "resX" y dentro del parentesis una X, esto debido a que pues requiero para la suma que cada valor este en una variable y dentro de el parentesis del getElementById, todos los id son numeros, asi lo quise hacer pero se que no tiene mucha logica que digamos, no se como colar esa variable X del for para que lo tome como "res1", "res2", "res3" etc... y despues hacer que sume todos esos resultados para que ponga en el campo "total" el resultado. Como no se me ocurrio otra forma de hacerlo, quise haerlo asi:

Código Javascript:

function sumarcampos() {
        var cont=document.getElementById("controlador");
        var precio1=document.getElementById("1").value;
        var precio3=document.getElementById("2").value;
                var precio4=document.getElementById("3").value;
                var precio5=document.getElementById("4").value;
                var precio6=document.getElementById("5").value;
                var precio7=document.getElementById("6").value;
        var resf;
        resf= parseInt(precio1)+ parseInt(precio2) + parseInt(precio3) + parseInt(precio4) + parseInt(precio5) + parseInt(precio6) + parseInt(precio7);
        document.getElementById("total").value=resf;
}
 

Puse tantos "precio" por si el usuario colocaba mas para que los reconociera, yo pense que si no existian, el valor en automatico seria 0 y no los tomaria en cuenta para la suma, pero al intentar hacerlo provoca que no haya resultado, en el entorno de prueba que tengo, solo hay dos refacciones, no he ingresado mas y el codigo del javascript es el siguiente

Código Javascript:

function sumarcampos() {
        var cont=document.getElementById("controlador");
        var precio1=document.getElementById("1").value;
        var precio2=document.getElementById("2").value;
        var resf;
        resf= parseInt(precio1)+ parseInt(precio2) ;
        document.getElementById("total").value=resf;
}
 

El cual si hace la suma de las dos unicas refacciones, pero si coloco una refaccion mas, obviamente solo hace la suma de los dos primeros campos, entonces quisiera si pueden ayudarme con alguna forma de sumar multiples variables con for o while ya que no se sabe cuantas variables van a sumarse exactamente.

[Alexis88]

Una manera práctica de hacer lo que buscas es utilizar una expresión regular como selector y el método .querySelectorAll() para tomar a todos los elementos cuyo id empiece por "res". El resultado será una lista de nodos que podrás recorrer con cualquier estructura repetitiva.

Código Javascript:

var nodos = document.querySelectorAll("[id^=res]");
 

Saludos

[zerobathory]

Iniciado por Alexis88

Una manera práctica de hacer lo que buscas es utilizar una expresión regular como selector y el método .querySelectorAll() para tomar a todos los elementos cuyo id empiece por "res". El resultado será una lista de nodos que podrás recorrer con cualquier estructura repetitiva.

Código Javascript:

var nodos = document.querySelectorAll("[id^=res]");
 

Saludos

Gracias por la respuesta, pero ya encontre como hacerlo, coloco la solucion en el siguiente comentario.

[zerobathory]

Estube buscando una solucion en la red y encontre ya una solucion, primeramente en todos los campos de refacciones, tienen que tener un id de 1, 2, 3 y asi sucesivamente, el cual yo hago con php de la siguiente forma:

Código PHP:

<?php $conref="SELECT * FROM refacciones INNER JOIN inventario ON refacciones.idideninventario=inventario.idinventario WHERE ididentiorden='".$arrorden['idrefaccion']."'";
                                                                      $queryref=$con->query($conref);
                                                                      if($queryref->rowcount() > 0 ){
                                                                        
                                                                                for($x=1; $x<=$queryref->rowcount(); $x++){
                                                                                        $arrayref=$queryref->fetch(PDO::FETCH_ASSOC);
                                                                                        echo"<tr><td>".$arrayref['nombreinventario']."</td><td><input type='text' readonly='readonly' id='$x' value='".$arrayref['precio']."' class='form-control'></td><td><a href='?v=bor&refaccion=".$arrayref['idrefa']."&prefijo=$prefijo_tabla'>Eliminar</a></td></tr>";
                                                                                }
                                                                     }
                                                                      else{
                                                                        echo "<tr><td colspan='3'>No hay costo de servicio a&uacute;n</td></tr>";
                                                                      }
                                                                ?>
 

Y el codigo javascript para que sume, lo pongo entre las etiquetas <head></head>

Código Javascript:

function sumarcampos() {
    id = 1;
    suma =0;
    existe = true;
    while(existe){    
        try{
        campo = document.getElementById(id);
            if(document.getElementById(id).value!=''){
                suma = suma + parseInt(document.getElementById(id).value);
            }
            id = id+1;
        }catch(e){
           existe = false;
        }  
    }
    document.getElementById('total').value=suma;  
}
 

Y como no ocupo ningun boton en si ni nada, la funcion la llamo dentro de la etiqueta body

<body onLoad="sumarcampos()">

Y listo :D

[Alexis88]

Para no tener que asignar identificadores independientes, puedes asignar una clase para todos los elementos y solo tendrías que tomarlos mediante dicha clase y recorrer el conjunto resultante.

Un ejemplo utilizando los métodos iterativos del objeto Array:

Código Javascript:

var total = [].map.call(document.querySelectorAll(".clase"), function(elem){
    return parseInt(elem.value);
}).reduce(function(prev, next){
    return prev + next;
});
 

La variable total contendrá el valor de la sumatoria. Solo es otra alternativa.

Saludos