mostrar valores de suma de 2 array

sam9021 · #1 (**permalink**) 26/12/2016, 15:35

Hola equipo

soy nueva en esto de los foros.
De favor necesito una ayudadita, estoy luchando con un código en javascript, estoy tratando de realizar una suma de 2 columnas y tengo una tercera donde en automático me dé la sumatoria de estas dos. El problema es que no logro separar valores del array, el código ya me hace la suma, pero al momento de mostrar resultados no los separa en diferentes filas, si no que se quedan en una sola.
Mis tres columnas del formulario "captura":
<input type="text" id="dato1" name="dato1[]" value="0" size="12">
<input type="text" id="dato2" name="dato2[]" value="0" size="12" onblur='ope()'>
<div id="test" name="test[]"> </div>

Función ope:
<script language="javascript" type="text/javascript">
function ope()
{
var a= document.getElementsByName('dato1[]');
var b= document.getElementsByName('dato2[]');

var sum = [];

for (i=0; i<a.length; i++)
{
sum[i]=(parseFloat(a[i].value))+(parseFloat(b[i].value));
}//for

document.getElementById('test').innerHTML=sum;
}//function
</script>

El resultado es el siguiente:

Muchisimas Gracias por el apoyo

sam9021 · #2 (**permalink**) 28/12/2016, 09:53

Hola equipo, de favor su super apoyo, me siento desesperada sigo intentando y no lo consigo :(
quien me pueda ayudar se lo agradecere bastante.

Alexis88 · #3 (**permalink**) 28/12/2016, 10:08

Antes de intentar ayudarte, necesito preguntarte algo; ¿estás usando estos elementos en todas las filas de la tabla?

Código HTML:

Ver original<input type="text" id="dato1" name="dato1[]" value="0" size="12">
<input type="text" id="dato2" name="dato2[]" value="0" size="12" onblur='ope()'>
<div id="test" name="test[]"> </div>

mpozo · #4 (**permalink**) 28/12/2016, 14:40

Como decimos por aquí "Más vale una imagen que cien palabras". Así que me guiaré por la imagen

Código Javascript:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
        <style>
            
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                new foo();
            }, false);
 
 
            function foo() {
                this.dato1 = document.querySelectorAll('input[name="dato1[]"]');
                this.dato2 = document.querySelectorAll('input[name="dato2[]"]');
                this.suma = document.querySelectorAll('div[name="test[]"]');
 
                var _this = this;
                [].forEach.call(_this.dato1, function(campo, indice) {
 
                    campo.addEventListener('keyup', function() {
 
                        _this.calcular(indice);
 
                    }, false);
 
                    _this.dato2[indice].addEventListener('keyup', function() {
 
                        _this.calcular(indice);
 
                    }, false);
                })
            }
 
            foo.prototype.calcular = function(i) {
                var dato1 = parseFloat(this.dato1[i].value) || 0,
                dato2 = parseFloat(this.dato2[i].value) || 0;
 
                this.suma[i].textContent = dato1 + dato2;
            }
        </script>
    </head>
    <body>
 
        <table>
            <tr>
                <td><input type="text" name="dato1[]" value="0" size="12"></td>
                <td><input type="text" name="dato2[]" value="0" size="12"></td>
                <td><div name="test[]"> </div></td>
            </tr>
            <tr>
                <td><input type="text" name="dato1[]" value="0" size="12"></td>
                <td><input type="text" name="dato2[]" value="0" size="12"></td>
                <td><div name="test[]"> </div></td>
            </tr>
        </table>
        
    </body>
</html>

Alexis88 · #5 (**permalink**) 28/12/2016, 14:49

Particularmente, usaría el evento input que es el más adecuado para casos en los que se opera con valores en campos de texto. Delegar el evento al elemento contenedor, lo haría más eficiente que registrarlo elemento por elemento; pero, en síntesis, debería funcionar. Es similar a la idea que tenía en mente.

Anyway, sería muy útil que sam9021 nos aclare la duda sobre la estructura que utiliza porque veo que otro usuario intentó contestar antes y se topó con el mismo problema.

sam9021 · #6 (**permalink**) 28/12/2016, 16:53

Hola Alexis88 y mpozo trate con tu codigo pero no obtuve resultados

les explico a detalle, tengo un formulario en el cual previamente yo recibo una variable $n, lo que hago es hacer bucle while a los elementos del formulario :

Código HTML:

Ver original<form name="captura" method="post" action="" >
  <input type="hidden" name="n" value=<?php  echo $n;?>/> 
  <table>   
<tr>
    <td>No</td> 
    <td>FICHA</td>
        <td>SERIE</td>
        <td>DATO1</td>
    <td>DATO2</td>
        <td>SUMA</td>    
     
</tr>
<tr>
<?php
///////////Hago la consulta a mi BD para traer previamente FICHA Y SERIE
$enlistar = $obj->consultar_f($ficha);
$row = mysql_fetch_array($enlistar);
$ficha_master=$row['ficha'];
$serie=$row['serie'];
 
$cantidad=1;
while($cantidad <= $n) {
?>
    <td><?php echo $cantidad; ?></td>   
    <td><?php echo $ficha_master . $cantidad;?></td>
        <td><?php echo $serie; ?></td>
    <td><input type="text" id="dato1" name="dato1[]" value="0" size="12"></td>
        <td><input type="text" id="dato2" name="dato2[]" value="0" size="12"  onblur='ope()'></td>  
    <td><div  id="test" name="test[]" > </div></td>
    
<?php 
$cantidad++;
   }
?>
</table>
</form>

y la funcion ope:

Código Javascript:

Ver original<script language="javascript" type="text/javascript">
function ope()
{  
var a= document.getElementsByName('dato1[]');
var b= document.getElementsByName('dato2[]');
var sum = [];
for (i=0; i<a.length; i++)
{
sum[i]=(parseFloat(a[i].value))+(parseFloat(b[i].value));
}//for
document.getElementById('test').innerHTML=sum;
}//function
</script>

lo que no logro hacer es separar los elementos del array en los diversos div que se estan ciclando como la imagen que envie mas arriba.
De favor su apoyo muchisimas gracias

Alexis88 · #7 (**permalink**) 29/12/2016, 11:48

Para empezar, deberías evitar repetir elementos con el mismo id. El ejemplo de mpozo te puede servir de guía ya que utiliza nombres a manera de arreglos de elementos. También puedes utilizar clases, pues, pueden repetirse. Fíjate, además, que estás intentando mostrar el contenido de un arreglo como texto de un elemento del DOM; eso no va a funcionar como esperas porque primero necesitas extraer la información y asignarla a cada elemento, lo cual también sería ineficiente puesto que repetirías el proceso para todas las filas cuando debería suceder solo en la fila en la que está ocurriendo el proceso.

Una forma en la cual haría esto sería, primero; agrupando a cada tresillo de elementos (el del primer valor, el del segundo y el que mostrará el resultado) en filas, teniendo cada elemento una clase distinta a la de los otros dos pero igual a la de sus equivalentes en las demás filas. Enseguida, asociaría el evento input (se produce al ocurrir un cambio en el valor de un elemento <input> o <textarea>) al listado, de tal forma que, cuando se produzca, busquemos, mediante el objeto del evento, a los tres elementos que necesitamos para realizar la operación. En el ejemplo adjunto, utilizo el método .parentNode para obtener a la fila entera. Finalmente, ya obtenidos los elementos, procedo a tomar el valor numérico que contengan (o cero, si no existe), para lo cual utilizo el operador + (puedes utilizar otros operadores o métodos), y, por último, los sumo y asigno el resultado como valor del tercer elemento.

Código HTML:

Ver original<section id="list">
    <div class="row">
        <div class="col">
            <label>Dato 1:</label>
            <input type="text" class="d1" />
        </div><div class="col">
            <label>Dato 2:</label>
            <input type="text" class="d2" />
        </div><div class="col">
            <label>Resultado:</label>
            <input type="text" class="d3" readOnly />
        </div>
    </div>
</section>

Código Javascript:

Ver original"use strict";
 
var Sumas = {
    load: function(){
        !Sumas.list && (Sumas.list = this.querySelector("#list")); //Tomamos al listado si no se lo ha hecho antes
        Sumas.list.addEventListener("input", Sumas.add, false); //Registramos el evento "input" en el listado
    },
    add: function(e){
        var fila = e.target.parentNode.parentNode, //La fila en la cual está ocurriendo el proceso
            d1 = fila.querySelector(".d1"), //El primer elemento
            d2 = fila.querySelector(".d2"), //El segundo elemento
            d3 = fila.querySelector(".d3"); //El elemento en donde se mostrará la respuesta
        d3.value = +(d1.value || 0) + +(d2.value || 0); //Sumamos los valores y mostramos la suma
    }
};
 
//Se ejecutará el método "Sumas.load" al terminar de cargar el árbol de elementos del documento
document.addEventListener("DOMContentLoaded", Sumas.load, false);

DEMO

El número de filas puede variar; incluso funcionará si añades o quitas filas en tiempo de ejecución.

mpozo · #8 (**permalink**) 29/12/2016, 14:44

Mi primera opción, al igual que tú, fue la de asignar el evento al ancestro superior y usar event.target pero, al haber dos campos más, esto implicaba que al realizar cualquier acción con el teclado sobre estos dos campos se invocaría la función que realiza la suma. Así que, preferí asignar a los campos involucrados el evento para evitarlo.
No sé, quizás no supe sopesar los pros y contras de ambas maneras de realizarlo