0

Estoy programando una tabla donde incluye campos para calcular precio * cantidad y colocando el resultado en otro campo de la misma linea para totalizarlos (tipo factura).

Estoy usando una funcion Javascript, uso un for para recorrer los arrays de los nombres de los inputs y no hay manera de que funcione, solo funciona colocando una línea por cada cálculo pero cuando coloco la estructura iterativa como For o Do While solo totaliza la primera linea.

<!DOCTYPE html>
<html>
<body>

<input type="text" id="cantidad" name="cantidad[]" value="" onkeyup="totalizar()">
<input type="text" id="precio" name="precio[]" value="1200">
<input type="text" id="total" name="total[]" value=""><br>
<input type="text" id="cantidad" name="cantidad[]" value="" onkeyup="totalizar()">
<input type="text" id="precio" name="precio[]" value="2000">
<input type="text" id="total" name="total[]" value=""><br>
<input type="text" id="cantidad" name="cantidad[]" value="" onkeyup="totalizar()">
<input type="text" id="precio" name="precio[]" value="5000">
<input type="text" id="total" name="total[]" value=""><br>

<script>
function totalizar() {
	cant = document.getElementsByName("cantidad[]");
    pre = document.getElementsByName("precio[]");
    tot = document.getElementsByName("total[]");
    x=0;	
    tot[x].value = cant[x].value * pre[x].value;
    tot[x+1].value = cant[x+1].value * pre[x+1].value;
    tot[x+2].value = cant[x+2].value * pre[x+2].value;     
}
</script>

</body>
</html>

2
  • No puedo reproducir el problema. ¿Podrías agregar el código con el bucle que te falla? Quizás sea un error relacionado con tener IDs duplicados, pero sin saber cómo haces el bucle, no se puede ver qué error tienes.
    – Alvaro Montoro
    Commented el 25 jul. 2017 a las 5:09
  • En el código original tenia invertidas 2 letras en una de las variable, y al transcribirlo lo corregí sin darme cuenta, menos mal que no hice copy/paste jejejej gracias por tomarte la molestia. Commented el 25 jul. 2017 a las 10:19

2 respuestas 2

1

Buenas,

La pregunta no esta muy clara pero por lo que entendí: añadí un For Loop (Bucle) y otro valor al Array (Matriz) de precio (7000), y las filas no pararon de multiplicarse.

<!DOCTYPE html>
<html>
	<body>

		<input type="text" id="cantidad" name="cantidad[]" value="" onkeyup="totalizar()">
		<input type="text" id="precio" name="precio[]" value="1200">
		<input type="text" id="total" name="total[]" value=""><br>
		<input type="text" id="cantidad" name="cantidad[]" value="" onkeyup="totalizar()">
		<input type="text" id="precio" name="precio[]" value="2000">
		<input type="text" id="total" name="total[]" value=""><br>
		<input type="text" id="cantidad" name="cantidad[]" value="" onkeyup="totalizar()">
		<input type="text" id="precio" name="precio[]" value="5000">
		<input type="text" id="total" name="total[]" value=""><br><input type="text" id="cantidad" name="cantidad[]" value="" onkeyup="totalizar()">
		<input type="text" id="precio" name="precio[]" value="7000">
		<input type="text" id="total" name="total[]" value=""><br>

		<script>
			function totalizar() {
				cant = document.getElementsByName("cantidad[]");
    		pre = document.getElementsByName("precio[]");
    		tot = document.getElementsByName("total[]");
    		for(var x = 0; x < pre.length; x++){ //".length" devuelve el largo del array.
    			tot[x].value = cant[x].value * pre[x].value;
				}
			}
		</script>
	</body>
</html>

Espero que funcione.

2
  • No hace falta actualizar toda la matriz cuando un único elemento es el que cambia. Para largas listas el rendimiento de la aplicación decrece Commented el 25 jul. 2017 a las 5:29
  • Muchisimas Gracias Sebastian el error que tenia era que el ejemplo que puse en la pregunta lo transcribí, en lugar de copiar y pegar, pues en ese proceso sin darme cuenta corregí el error que tenia en el original jajaja. eran 2 letras invertidas que tenia. Gracias por responder, todavía estuviese dando vueltas. Commented el 25 jul. 2017 a las 10:13
0

Lo que pasa es que a todos los elementos le has colocado los mismos identificadores, por tanto el hacer

cant = document.getElementsByName("cantidad[]");
pre = document.getElementsByName("precio[]");
tot = document.getElementsByName("total[]");

devuelve un arreglo de N elementos, idependientemente quien dispara el evento, tu únicamente actualizas los elementos 0, 1, 2.

No hace falta identificar cada miembro cuando se utiliza una plantilla especifica, el uso de ID's y names está de más.

function ActualizarTotal(e)
{
  var inputs = e.target.parentNode.querySelectorAll('input')
  inputs[2].value = inputs[0].value * inputs[1].value
}

var entradas = document.querySelectorAll('div.entrada input:nth-child(1)')
for(entrada of entradas)
  {
    entrada.addEventListener('change', ActualizarTotal, false)
  }
<div class="entrada">
	<input type="number" placeholder="cantidad" value="1"/>
	<input type="number" placeholder="precio" value="100" disabled/>
	<input type="number" placeholder="total" disabled value="100"/> 
</div>
<div class="entrada">
	<input type="number" placeholder="cantidad" value="2"/>
	<input type="number" placeholder="precio" value="200" disabled/>
	<input type="number" placeholder="total" value="400" disabled/> 
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.