Foros del Web » Programando para Internet » Javascript »

Usar getElementById() como valor de un miembro de un Array

Estas en el tema de Usar getElementById() como valor de un miembro de un Array en el foro de Javascript en Foros del Web. Hola: Pues esta es la duda. Estoy intentando crear un array/objeto (todavía no sé bien la diferencia entre ambos) de la siguiente forma: Código: var ...
  #1 (permalink)  
Antiguo 23/03/2013, 13:24
 
Fecha de Ingreso: septiembre-2010
Mensajes: 494
Antigüedad: 14 años, 2 meses
Puntos: 10
Usar getElementById() como valor de un miembro de un Array

Hola:

Pues esta es la duda. Estoy intentando crear un array/objeto (todavía no sé bien la diferencia entre ambos) de la siguiente forma:
Código:
var cuadro = {
						cuadro1	:	document.getElementById ("Cuadro1"),
						top	:       document.defaultView.getComputedStyle(cuadro1, '').getPropertyValue('top'),
						left	:	document.defaultView.getComputedStyle(cuadro1, '').getPropertyValue('left'),
						width	:	document.defaultView.getComputedStyle(cuadro1, '').getPropertyValue('width'),
						height	:	document.defaultView.getComputedStyle(cuadro1, '').getPropertyValue('height')
					};
Pero me sale el error:
Código:
Unhandled Error: Undefined variable: cuadro1
Entonces la duda es...¿es posible asignar un elemento referenciado con getElementById() como valor de un miembro del array?
Y si es posible, ¿de qué manera sería?

Muchas gracias por adelantado
  #2 (permalink)  
Antiguo 23/03/2013, 15:51
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: Usar getElementById() como valor de un miembro de un Array

el key ha de estar entrecomillado
Cita:
obj = {
key : valor, // no se entrecomilla si no son string
'key' : 'valor' // se entrecomilla si son string
}
puedes probar con esto
Cita:
var arr = [];
arr[0] = 'a';
arr['b'] = 'c';

var obj = {0: 'a', 'b': 'c'};

// Recorremos el Array
// Muestra un unico item. el key y el valor
// 0 -> a
for(var i = 0; i < arr.length; i++) {
console.log(i, '->' ,arr[i]);
}


// Recorremos el Objeto
// Muestra ambos items. el key y el valor
// 0 -> a
// b -> c
for(var i in obj) {
console.log(i, '->' ,obj[i]);
}
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 23/03/2013, 17:00
 
Fecha de Ingreso: septiembre-2010
Mensajes: 494
Antigüedad: 14 años, 2 meses
Puntos: 10
Exclamación Respuesta: Usar getElementById() como valor de un miembro de un Array

Hola, gracias por responder, pero no sé si esa es la causa.

La variable cuadro1 referencia un elemento <div>. De todas formas he probado por si acaso...pero no :(

De todas formas he cambiado la estrategia. En lugar de crear un objeto/array, estaba intentando crear una pseudoclase. (mas bien una función que pseudoclase...), pero no consigo que me retorne los valores.

Así:
Código:
function cuadro(cadena) {
var cuadro1		=	document.getElementById(cadena);
var top			=	document.defaultView.getComputedStyle(cuadro1, '').getPropertyValue('top');
var left		=	document.defaultView.getComputedStyle(cuadro1, '').getPropertyValue('left');
var width		=	document.defaultView.getComputedStyle(cuadro1, '').getPropertyValue('width');
var height		=	document.defaultView.getComputedStyle(cuadro1, '').getPropertyValue('height');
						
var limiteX= parseInt(top)+parseInt(height);
var limiteY= parseInt(left)+parseInt(width);
						
console.log(limiteX); //<-----Aqui va bien. Se  muestra el valor
function muestraX()
{						
	return limiteX;
}
};
Ahora el problema es que no me devuelve los valores

Código:
var casilla = new cuadro("Cuadro1");
console.log(casilla.muestraX);//<----Aqui muestra indefinido
  #4 (permalink)  
Antiguo 23/03/2013, 18:20
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Usar getElementById() como valor de un miembro de un Array

Declará la función dentro del objeto

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

#cuadro1{
left: 30px;
top: 50px;
position: absolute;
width: 300px;
height: 300px;
background: lime;
}

/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[

function cuadro(cadena) {
var cuadro1		=	document.getElementById(cadena);
var top			=	document.defaultView.getComputedStyle(cuadro1, '').getPropertyValue('top');
var left		=	document.defaultView.getComputedStyle(cuadro1, '').getPropertyValue('left');
var width		=	document.defaultView.getComputedStyle(cuadro1, '').getPropertyValue('width');
var height		=	document.defaultView.getComputedStyle(cuadro1, '').getPropertyValue('height');	
this.muestraX = function () { return limiteX*2; };					
var limiteX= parseInt(top)+parseInt(height);
var limiteY= parseInt(left)+parseInt(width);
						
console.log(limiteX); //<-----Aqui va bien. Se  muestra el valor
}

window.onload = function(){
//cuadro('cuadro1');
var casilla = new cuadro("cuadro1");
console.log(casilla.muestraX());
}

//]]>
</script>
</head>
<body>
<div  id="cuadro1"></div>
</body>
</html>
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 23/03/2013, 18:30
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: Usar getElementById() como valor de un miembro de un Array

primero, no digas que algo no funciona sin mirar las consola de errores
Cita:
var cuadro = {
'cuadro1': 'las meninas',
'top': 0
};


console.log(cuadro.cuadro1 + ' - ' + cuadro.top);
segundo, lee este tutorial -- poo

Cita:
function cuadro2(cadena) {
this.cuadro1 = 'las meninas';
this.top = 0;
};

var obj = new cuadro2();
console.log(obj.cuadro1);
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #6 (permalink)  
Antiguo 24/03/2013, 12:54
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Usar getElementById() como valor de un miembro de un Array

¡saludos gentes!

me sumo al tema para explicar el problema inicial y así evitar que vuelva a repetir el mismo conflicto.

Cita:
Iniciado por dehm Ver Mensaje
Entonces la duda es...¿es posible asignar un elemento referenciado con getElementById() como valor de un miembro del array?
si, es posible, y se hace tal como lo estás haciendo en esta línea:
Código:
cuadro1: document.getElementById ("Cuadro1"),
sin embargo, la razón del error Unhandled Error: Undefined variable: cuadro1 se debe a otra causa. en tu código, la referencia cuadro1 de las líneas restantes —top, left, width, height— no hacen referencia a la propiedad cuadro.cuadro1 sino a una variable que previamente debe existir. por eso el mensaje de error cita Undefined variable. lo más lógico sería pensar que falta agregar this por detrás de cuadro1 para hacer referencia a dicha propiedad del objeto que se está creando:

Código:
...
top: document.defaultView.getComputedStyle(this.cuadro1, '').getPropertyValue('top'),
...
lo cierto es que seguirá mostrando el mismo error, a no ser que exista una variable global con el mismo nombre. esto porque this en el contexto de un objeto literal no hace referencia al propio objeto, sino más bien al objeto padre. el objeto padre bien puede ser Window u otro según sea donde se declare la variable. (en tu caso, la variable cuadro).

en conclusión, no es posible acceder a los identificadores (propiedades o métodos) de un objeto literal mientras éste se está creando. nótese que no significa lo mismo que un método acceder a una propiedad del objeto luego del objeto ser creado.

Código:
// objeto literal en contexto global ;
var obj = {
num: 0,
double: this.num * 2,
ref: this
};

console.log(obj.num, // imprime 0 ;
obj.double, // imprime NaN, se esta multiplicando undefined por 2 ;
obj.ref // imprime el objeto Window ;
);
Código:
// this en un objeto literal creado en el contexto de un constructor ;
function F(){
this.obj = { ref: this };
}

var f = new F();
console.log(f.obj.ref, // imprime objeto F, o similar según intérprete ;
f.obj.ref === f // imprime true, ambos son el mismo objeto ;
);
Código:
// this en un método de un objeto literal ;
var obj = {
prop: 'un valor',
method: function(){ return this.prop; }
};

console.log( obj.method() ); // imprime el string 'un valor' ;
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #7 (permalink)  
Antiguo 25/03/2013, 05:49
 
Fecha de Ingreso: septiembre-2010
Mensajes: 494
Antigüedad: 14 años, 2 meses
Puntos: 10
Respuesta: Usar getElementById() como valor de un miembro de un Array

Fenomenal.
Muchas gracias a los tres!
Y gracias zerokilled por una explicación tan clara.
Me encanta este foro!

Etiquetas: getelementbyid, usar, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:25.