Un detalle....

Siho · #1 (**permalink**) 25/10/2009, 16:17

Se que es absurdo pero no se cómo hacerlo...

Tengo el siguiente código:

Código HTML:

<html>
<head>
<SCRIPT LANGUAGE=JavaScript>
function Sumar() {
var val1;
var val2;
var val3;
var val1tot1 = 0;
var val1tot2 = 0;
var val1tot3 = 0;
var val1tot;
var val2tot;
var val3tot;

for (i=0; i<document.factura.lista1.length; i++){
	
	
val1 = (! parseFloat(document.factura.lista1[i].value))?0:parseFloat(document.factura.lista1[i].value);
val1tot = val1 * document.factura.categoa.value;
val1tot1 += val1tot;


val2 = (! parseFloat(document.factura.lista2[i].value))?0:parseFloat(document.factura.lista2[i].value);
val2tot = val2 * document.factura.categob.value;
val1tot2 += val2tot;

val3 = (! parseFloat(document.factura.lista3[i].value))?0:parseFloat(document.factura.lista3[i].value);
val3tot = val3 * document.factura.categoc.value;
val1tot3 += val3tot;

document.factura.tot.value = val1tot1+val1tot2+val1tot3;
}

}
</SCRIPT>
</head>
<body>
<form name=factura>
CATEGORIA A<br>
<select name="lista1" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="lista1" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>



<BR><BR>CATEGORIA B<br>
<select name="lista2" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="lista2" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<BR><BR>CATEGORIA C<br>
<select name="lista3" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="lista3" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>TOTAL<br>
<input name=tot size=6><br><br>
Catego A <input name=categoa size=6 type='text' value="20"><br>
Catego B <input name=categob size=6 type='text' value="50"><br>
Catego C <input name=categoc size=6 type='text' value="100"></td>
</form>
</body>
</html>

Ocurre, lógicamente, que si en lugar de haber dos Select por Categoría (2 para la categoría A, dos para la B...) hay uno para alguna categoría de las tres, el formulario empieza a fallar. Supongo que se solucionaría poniendo un If para cuando sólo haya un Select pero no se ni cómo plantearlo

Resumiento:
Va correctamente si...
Categoría A
Select
Select
Select
Categoría B
Select
Select
Categoría C
Select
Select
Select
Select

Falla si...
Va correctamente si...
Categoría A
Select
Select
Categoría B
Select
Categoría C
Select
Select

Muchas gracias!

zerokilled · #2 (**permalink**) 25/10/2009, 22:18

el error se debe a lo siguiente. cuando mas de un elemento comparte el mismo valor en el atributo name la referencia document.nombre es una coleccion de elementos. un tipo de objeto parecido a un array en el sentido en que contiene indices y cada pocision hace referencia a cada uno de los elementos. pero cuando existe un solo elemento con dicho nombre, entonces la referencia document.nombre es una referencia directa para dicho elemento y este no contiene ningun indice. mas bien, si intentas usarlo como indice cada posicion hace referencia a los elementos OPTIONs de dicho select.

para corregirlo, mi sugerencia es que en lugar usar document.nombre utilices document.getElementsByName(nombre). con dicho metodo siempre obtendras una coleccion de elementos, incluso si solamente existe un elemento. la idea es que puedas determinar la cantidad exacta de elementos existente recorriendolo con un bucle.

el otro detalle que tienes que cuidar es la forma actual que tienes para recorrer por los elementos. si por ejemplo, categoria A contiene dos select, pero categoria B contiene un select, basando el bucle de acuerdo a categoria A (como lo tienes actualmente), el codigo genera un error porque se intenta leer una posicion que no existe en categoria B. o sea, el bucle tienes que basarlo segun la cantidad de SELECTs que hay para cada categoria.

Siho · #3 (**permalink**) 26/10/2009, 05:40

Muchas gracias!! Pero sigo atascado

He cambiado el For por un While individual para cada categoría, de esa manera me cuenta con exactitud los Select que hay en cada categoría pero, a la hora de sustituir los document.nombre por los document.getElementsByName(nombre) me da errores como Undefinite o el famoso NaN.

Lo estoy haciendo así:

Código HTML:

val1 = (! parseFloat(document.getElementsByName(lista1[i])))?0:parseFloat(getElementsByName(lista1[i])));

Acias de nuevo!

zerokilled · #4 (**permalink**) 26/10/2009, 06:10

lo unico que tenias que hacer era sustituir document.nombre sin eliminar lo que le seguia. o mas bien, para no sobrecargarlo, creas una variable con el valor que devuelve getElementsByName, y luego usas esa variable en sustitucion de document.name.

Código:

var lista_uno = document.getElementsByTagName("lista1");
val1 = (!parseFloat(lista_uno[i].value))? 0: parseFloat(lista_uno[i].value);
// o mas bien esta ultima linea la puedes reducir como sigue;
val1 = parseFloat(lista[1].value) || 0;

Siho · #5 (**permalink**) 26/10/2009, 06:44

Perfecto!! Muchisimas gracias!

Pongo el código final funcionando perfectamente, por si le sirve a alguien:

Código HTML:

<html>
<head>
<SCRIPT LANGUAGE=JavaScript>
function Sumar() {
var val1;
var val2;
var val3;
var val1tot1 = 0;
var val1tot2 = 0;
var val1tot3 = 0;
var val1tot;
var val2tot;
var val3tot;

for (i=0; i<document.factura.lista1.length; i++){
	
var lista_uno = document.getElementsByName("lista1");
val1 = (!parseFloat(lista_uno[i].value))? 0: parseFloat(lista_uno[i].value);
val1tot = val1 * document.factura.categoa.value;
val1tot1 += val1tot;


var lista_dos = document.getElementsByName("lista2");
val2 = (!parseFloat(lista_dos[i].value))? 0: parseFloat(lista_dos[i].value);
val2tot = val2 * document.factura.categob.value;
val1tot2 += val2tot;

var lista_tres = document.getElementsByName("lista3");
val3 = (!parseFloat(lista_tres[i].value))? 0: parseFloat(lista_tres[i].value);
val3tot = val3 * document.factura.categoc.value;
val1tot3 += val3tot;

document.factura.tot.value = val1tot1+val1tot2+val1tot3;
}

}
</SCRIPT>
</head>
<body>
<form name=factura>
CATEGORIA A<br>
<select name="lista1" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>




<BR><BR>CATEGORIA B<br>
<select name="lista2" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="lista2" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<BR><BR>CATEGORIA C<br>
<select name="lista3" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="lista3" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>TOTAL<br>
<input name=tot size=6><br><br>
Catego A <input name=categoa size=6 type='text' value="20"><br>
Catego B <input name=categob size=6 type='text' value="50"><br>
Catego C <input name=categoc size=6 type='text' value="100"></td>
</form>
</body>
</html>