al hacer click sobre el boton no llama a la funcion..

Jota_bg · #1 (**permalink**) 27/08/2009, 14:54

Hola, estoy probando este código. La idea es crear casillas y luego eliminarlas desde la ultima hasta la primera. basicamente para aprender sobre el DOM.
El código crea los TEXT pero el boton REMUEVE no hace nada, alguien sabe porque?

Código HTML:

<title>nada</title>
<script language="javascript1.4" type="text/javascript">
function potencia(){
	var a = document.getElementById("calculo");
	if (a){
		alert("el valor de a.base.value es :"+a.getElementsByTagName("input")[0].value);
		alert("el valor de a.elevado.value es :"+a.getElementsByTagName("input")[1].value);
		alert("el valor de a.resultado.value es :"+a.getElementsByTagName("input")[2].value);
		if (base=a.getElementsByTagName("input")[0].value) {
			var nuevoInput= document.createElement("input");
			nuevoInput.type= "text"; nuevoInput.value= base; nuevoInput.name= "nuevo";
			// creando Elemento dentro de CALCULO!
			a.appendChild(nuevoInput);
			alert("hecho!!!");
		}
	} else 
		alert("no pasa nada");
		
}

function quita(){
	var a= document.getElementById("calculo");
	alert("entre!!");
	var inputs= a.getElementsByTagName("input");
	var largo= inputs.length-1;
	alert("el largo es: ".largo);
	var aborrar= a.getElementsByTagName("input")[largo];
	a.removeChild(aborrar);
	alert("hecho!!");
}
</script>
</head>
<body>
<form id="calculo" name="calculo">
	Numero: <input type="text" name="base" />
    Potencia: <input type="text" name="elevado" />
    Resultado: <input type="text" name"resultado" />
<input type="button" name="poten" value="Calcular Potencia" onclick="potencia()" />
<input type="button" name="quita" value="Remueve" onclick="quita()" />
</form>

</body>
</html>

zerokilled · #2 (**permalink**) 27/08/2009, 15:24

Cita:

pero el boton REMUEVE no hace nada, alguien sabe porque?

tienes un problema de identificadores. cuando digo identificadores, no me refiero a los ID de elementos sino a los nombres que se le asigna a las variables y funciones. tecnicamente asi es como se le llama, identificadores.

ahora bien, tu problema es que tu funcion se llama quita y donde se llama, el elemento contiene el mismo valor para el atributo name. la solucion es simple, simplemente cambia el identificador de la funcion por otro. como norma general, se recomienda que nunca dupliques los identificadores aunque esten en diferentes area para evitar este problema. para ilustrarlo,

Código:

// aqui es donde esta el problema;
<input type="button" name="quita" value="Remueve" onclick="quita()" />

como referencia adicional. quizas te preguntes porque crea problema si quita es una funcion en javascript e <input name="quita" ... /> es un elemento HTML el cual se entiende que no deberia confligir. la repuesta esta en el contexto (o scope) donde se ejecuta el codigo. los eventos tienen sus propios scope y comienzan a partir del elemento. entonces, sucede que cuando el interprete lee quita desde el evento, el iterprete comienza buscando identificadores con ese nombre, comienza a partir desde el elemento y subiendo por sus ancestro. debes recordar que los atributos HTML se convierten en propiedades, de modo que cuando el interprete llega al elemento FORM, quita es una propiedad que hace referencia al elemento <input name="quita" ... />. y ahi es precisamente donde esta el conflicto, el navegador te indica que quita no es una funcion, porque el interprete nunca llego al scope donde reside la funcion.

por cierto, la otra solucion en lugar de cambiar el identificador, tienes que preceder la funcion con window.

Código:

<input ... onclick="window.quita();" />

Jota_bg · #3 (**permalink**) 27/08/2009, 15:38

Muchas gracias, esta clarisimo.
Ahora, cual es la regla?, "windows.quita()" ó "quita()". se entiende?

voi a probar...

zerokilled · #4 (**permalink**) 27/08/2009, 15:43

Cita:

"windows.quita()" ó "quita()".

la primera alternativa esta mal escrita, es window sin la s al final. la segunda alternativa, quise decir que tienes que cambiar el nombre del identificador, por ejemplo, en lugar de "quita" lo llamas "quitar". o bien puedes cambiar el valor del name en el input por otro. el punto es que no pueden haber mas de un identificador con el mismo nombre.

¿cual de las alternativa es mejor? da igual, eso es decision tuya, y ambas son validas.

Jota_bg · #5 (**permalink**) 27/08/2009, 15:46

Gracias!!
Funciono muy bien. Evitaré caer en errores de contexto y seguire agregando cosas y probando.

gracias denuevo.