Problema con el ámbito de una función.

FFreddyy · #1 (**permalink**) 03/02/2010, 08:39

Lo que quiero es saber si hay alguna forma de pasar parámetros a una función f que se la asigno al evento onclick de la siguiente forma button.onclick=f; ya que lo que intenté fué accesar desde dentro de f una variable definida fuera, pero me surge un erro, como pueden apreciar:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<title>Editor de texto</title>
	<meta name="GENERATOR" content="Quanta Plus">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		div{
			text-align:left;
			margin:auto;
			width:95%;
			height:200px;
			border:2px silver solid;
		}
	</style>
	<script language="JavaScript" type="text/javascript">

		function createControls( editableDiv ){
		//Crea un div con controles para el div editable exactamente después del div Editable
		//Cada boton tiene un id conforma ("editableDivControl"+[tag del elemento HTML correspondiente al control]) ej: "editableDivControlh1"
			//editableDivControlB
			function onclickEditableDivControl(  ){
			//Modifica el objeto window.editableDivNamespace.action asignándole la acción correspondiente al boton en cuestión, y deja dicho botón activado o desactivado según sea necesario;

				//newButton definida fuera de la función
				var button=newButton;

				//Modifico el objeto y obtengo la propiedad que contenía antes
				if( !window.editableDivNamespace ){
					window.editableDivNamespace=new Object;
					window.editableDivNamespace.action=button.value;

					//Estilo de un boton presionado
					button.style.background="#888";

				}else if( !window.editableDivNamespace.action ){
					window.editableDivNamespace.action=button.value;

					//Estilo de un boton presionado
					button.style.background="#888";

				}else if( window.editableDivNamespace.action==button.value ){
					releasedButton=window.editableDivNamespace.action;
					window.editableDivNamespace.action="";

					//Estilo de un boton libre
					button.style.background="#ccc";

				}else{
					releasedButton=window.editableDivNamespace.action;
					window.editableDivNamespace.action=button.value;

					//Estilo de un boton presionado
					button.style.background="#888";

					//Estilo de un boton libre
					document.getElementById( "editableDivControl"+window.editableDivNamespace.action ).style.background="#ccc";

				}

				
			}

			//matriz que contien los elementos correspondientes a los botones, para ind par ind=(Nombre del botón), ind+1=(value del botón)
			var buttonsElements=new Array( "Negrita","b" , "Itálica","i" , "Emfásis" , "em" );

			//Elemento que contendrá los botones de control
			var controlsDiv=document.createElement( "div" );

			//Recorro la matriz buttonsElements creando botones y agregandolos al div controlsDiv
			for( ind=0; ind<buttonsElements.length ; ind+=2 ){
				var newButton=document.createElement( "button" );
				newButton.appendChild( document.createTextNode( buttonsElements[ind] ) );
				newButton.value=buttonsElements[ind+1];
				newButton.id="editableDivControl"+buttonsElements[ind+1];

				newButton.onclick=onclickEditableDivControl;

				controlsDiv.appendChild( newButton );
			}

			document.body.appendChild( controlsDiv );

		}

	</script>
</head>
<body onload="createControls( document.getElementById( 'editor' ) )">

	<div id="editor" ></div>
</body>
</html>

zerokilled · #2 (**permalink**) 03/02/2010, 10:37

si quieres pasar parametros a una funcion pero esta funcion es asignada como metodo o handler de un evento, necesitas crear una funcion anonima donde esta invoque la funcion deseada pasando los parametros necesarios. es decir,

Código:

function f(a, b){
...
}

// funcion anonima, una funcion sin nombre asignada a una propiedad o variable;
element.onclick = function(){
// invocacion de una funcion pasando parametros;
f(1,2);
}

sin embargo, en tu caso particular y segun lo que pude descifrar, tu quieres pasar como parametro el boton creado dinamicamente. dado que la funcion es asignada como evento de dichos botones dinamicos, no necesitas pasarle la variable newButton como parametro. para hacer referencia al boton desde la funcion simplemente utiliza la keyword this. en tu caso funciona porque la funcion es asignada como un metodo del elemento de modo que this siempre hace referencia al objeto que le contiene.

FFreddyy · #3 (**permalink**) 04/02/2010, 07:55

Interesante lo que describes acerca de pasar parámetros a funciones en propiedades, lo voy a tener en cuenta, y sobre lo de this, pensé que definida ahí hacía referencia al elemento windows, pero ya comprobé que se referiría al button. Muchas gracias por la ayuda, saludos

.

zerokilled · #4 (**permalink**) 04/02/2010, 11:29

Cita:

y sobre lo de this, pensé que definida ahí hacía referencia al elemento windows ...

se debe al concepto de late o dynamic binding. en resumen, mas o menos lo que quiere decir es que hay implementaciones que se determinan en tiempo de ejecucion. en español, hay ciertas referencias que se determinan en tiempo de ejecucion. preguntate por ejemplo, ¿que sucede si asignamos una funcion nativa del objeto documento a una variable global y luego la invocamos desde la variable? es decir,

Código:

var escribir = document.write;
escribir('contenido');