[SOLUCIONADO] AddEventListener Problema al intentar capturar su Id

[Albuss]

Buenas!

Tengo un problema a la hora de usar AddEventListener, Lo que intento Obtener ;

HTML:

Código HTML:

<div onmouseover="this.style.opacity = 1"> </div>
 

Lo que hasta ahora mas me he aproximado pero sin conseguir el resultado :

Javascript:

Código Javascript:

document.getElementById(this.ID/* Es una propiedad definida dinamicamente, es como la clabe primaria en MySQL cada vez que se crea un div nuevo esta propiedad adquiere automaticamente :This.ID++ */).addEventListener("mouseover", function () {this.style.opacity = 1;}, false);
 

Ovbiamente, el fallo, es que no consigo obtener el id de forma correcta, he probado con :

Código Javascript:

.addEventListener("mouseover", function () {document.getElementById(this.ID) = 1;}, false);
 

Pero no funciona por que this.ID es una propiedad que esta autoincrementandose siempre, y si hago referencia a ella, se le esta pasando el ultimo valor y no el que yo quiero ¿alguna sugerencia para capturar de forma correcta el id?

[chwc]

/* Es una propiedad definida dinamicamente, es como la clabe primaria en MySQL cada vez que se crea un div nuevo esta propiedad adquiere automaticamente :This.ID++ */

quien creo esta variable ?? el navegador ?? tu ??
no referencias el momento de la creación, deberia ser una variable que se crea dentro de la función , si fuera global, estas usando el this. mal.

si tu respuesta es el navegador, lo siento, el navegador no genera eso, a lo sumo genera el this.id ( que seria en caso de que estes adentro de un objeto del DOM, el cual da el resultado el id, y no es numerico, es una cadena, y fijate la diferencia entre mayusculas/minusculas )

Pero no funciona por que this.ID es una propiedad que esta autoincrementandose siempre, y si hago referencia a ella, se le esta pasando el ultimo valor y no el que yo quiero ¿alguna sugerencia para capturar de forma correcta el id?

si, pero cuando ejecutas esto

document.getElementById(this.ID).«mas codigo»

estas obteniendo el valor actual de this.ID, no se actualiza "dinamicamente"

hay algo que estas haciendo mal, explica mas tu codigo, y para verificar mejor, agregale una linea antes de que le asignas el addEventListener a tu objeto, con lo siguiente

Código Javascript:

console.log('resultado: '+ this.ID);
 

y fijate en la consola de tu navegador web que resultados te da, y dejalos aqui ( si dice resultado: undefined, es porque this.ID no existe )

un saludo

[Albuss]

Ovbiamente this.ID es una propiedad del prototipo, es decir es una variable de una clase que yo he declarado.



No queria poner un trozo gordo de codigo, ya que mi duda es solo referente a una linea de código completa, pero a tu petición : el bloque de codigo :

Código Javascript:

//Incremento el this.ID ahora por que hay una funcion previa que ya inicializa el primer ID para el Primer Div. 
        this.ID++;
        
        capa = document.getElementById('divContenedorDeEsteYotrosDivQueSeGeneranAutomaticamenteConEsteModelaDor');      
        contenedor = document.createElement('div');
        contenedor.id = this.ID;
        contenedor.className = 'ClaseCSSDeprueva';
        capa.appendChild(contenedor);
        document.getElementById(this.ID).addEventListener("mouseover", function () {this.style.opacity = 1;}, false);
 

El debugger de Chrome no aportada nada(no alerta de ningún error), llevo medio dia con este problema, si el Debugger me aportara algún dato de error posiblemente no tendria que acudir aquí (ahora mas que nunca es cuando intento sacar por mi mismo las soluciones, ovbiamente aun se me resiste algun trozo de codigo), en la misma consola de chrome, puedo ver que el evento listener si se añadio, pero no ejecuta correctamente el codigo por que como digo necesito sonsacar correctamente la ID concreta.

[chwc]

this.ID lo estas tratando como un entero, en tal caso lo podrias tratar asi

Código Javascript:

this.ID++;
        
        capa = document.getElementById('divContenedorDeEsteYotrosDivQueSeGeneranAutomaticamenteConEsteModelaDor');      
        contenedor = document.createElement('div');
        contenedor.id = this.ID + ''; // aplicandolo como string
        contenedor.className = 'ClaseCSSDeprueva';
        capa.appendChild(contenedor);
        document.getElementById(this.ID+'').addEventListener("mouseover", function () {this.style.opacity = 1;}, false);
 

y otra cosa, no seria mas facil hacero asi ??

Código Javascript:

this.ID++;
        
        capa = document.getElementById('divContenedorDeEsteYotrosDivQueSeGeneranAutomaticamenteConEsteModelaDor');      
        contenedor = document.createElement('div');
        contenedor.id = this.ID + ''; // aplicandolo como string
        contenedor.className = 'ClaseCSSDeprueva';
        capa.appendChild(contenedor);
        contenedor.addEventListener("mouseover", function () {this.style.opacity = 1;}, false);
 

en vez de buscarlo, ya que tenes el elemento DOM, aplicarlo directamente

un saludo

[Albuss]

Iniciado por chwc

Código Javascript:

contenedor.id = this.ID + ''; // aplicandolo como string
 

El modelador de div funciona bien, de hecho el valor this.ID es una pieza clave dentro del prototipo (clase) y no me ha dado ningún solo error al respecto, no veo por que es necesario tratarlo como dices tu.

Iniciado por chwc

y otra cosa, no seria mas facil hacero asi ??

Código Javascript:

contenedor.addEventListener("mouseover", function () {this.style.opacity = 1;}, false);
 

Ya probe , no funciona, y el debugger de chrome no dice nada, creo que es por que 'contenedor' es solo la instancia temporal de un metodo del DOM : .createElement

[chwc]

de hecho, hay algo mal, cree y probe esto http://jsfiddle.net/xTnbT/1/ , y funciona a la perfección, asi que no tendria problemas en aplicarle el addEventListener a "contenedor"

me estoy quedando sin palabras, lo unico que se me ocurre es que no se ejecute, nose que pasa

[Albuss]

El evento ya te comente que se ejecuta sin errores, pero no como yo quiero, es decir, cuando ocurre , lo aplica al ULTIMO ID, es decir, referencia a this.ID (valor actual) , cuando lo que yo busco, es el ID del Div creado.

¿que div ID, te sale cuando se lanza el evento?, prueba con un alert+this. a ver que sale. Ami me da el ultimo ID :(



Gracias por responder las tres veces y implicarte de esta forma.

[chwc]

a mi me sale bien, pero uso this.id en vez de this.ID, ya que al crear el elemento, le estas asignando el .id, no el .ID

http://jsfiddle.net/xTnbT/2/

le agrege un evento onclick, asi que clickealos nomas

un saludo!!

[Albuss]

Okey, revisare de arriba a bajo otra vez toda la clase a que por que no puedo obtener el mismo resultado que tu, gracias!

[emprear]

En referencia a tu objetivo

Código:

<div onmouseover="this.style.opacity = 1"> </div>

Código HTML:

<!DOCTYPE html>
<html>
<head>
<title>addEvent + variable</title>
 
<style>
td{
cursor: pointer;
}
div#uno{
background: #000;
opacity: .5;
width:100px;
height:100px;
}
</style>
<script>
// cambia opacidad
function cambiaOpc(elem,v) {
elem.style.opacity = v;  
}
  
// agregar Evento 
window.onload = function(){
  var el = document.getElementById("uno");
  el.addEventListener("mouseover", function(){cambiaOpc(el,'1')}, false); // pasas el objeto como parámetro a la función
}
</script>
 </head>
<body>
  <div id="uno"></div>
</body>
</html>
 

o bien le ponés un id al div, ó lo identificas de alguna otra manera,

Código:

document.getElementsByTagName('div')[0];

por ejemplo

Saludos