[SOLUCIONADO] getAttribute style no funciona con ciclo for de php!

[Sirakx]

Hola amigos tengo un problema el cual es el siguiente.

tengo un ciclo for en php el cual es el siguiente:

Código:

<?php
$verticaltope = 736;
$bottomtope = 736;
for ($i = 0; $i <= $verticaltope; $i=$i+32) { 
      for ($j = 0; $j <= $bottomtope; $j=$j+32) {
             echo '<div class="focus"><div id="posimg" class="imagen" style="background-position: -'.$j.'px -'.$i.'px;"></div></div>';
      }
}
?>

Bueno pues son 2 pequeños ciclos es cual me muestra en un div pequeñas imagenes de una imagen mas grande.

el caso es que cuando quiero obtener el backgroun position de ese elemento me sale que su posición es de 0px 0px y las verdad no logro hacerlo funcionar. este es el script que tengo.

Código:

function getImagePosition(){
	var demo = document.getElementById('posimg').getAttribute("style");
    alert(demo.toString());
}

window.addEventListener('click', getImagePosition);

espero que me puedan ayudar! gracias

[Alexis88]

Antes de indicar la manera en la que puedes seleccionar a cualquiera de dichos elementos, debes saber que jamás debes de repetir el mismo id dentro del mismo documento HTML. Puedes repetir clases o nombres, pero nunca un id. Recuerda siempre que se trata de un dato único.

Ahora bien. El problema surge precisamente por intentar tomar a un elemento cuyo dato identificador se repite en otros elementos existentes en el mismo documento. Cuando intentas hacer algo semejante, solo logras obtener al primero de todos los elementos, y como estableces los valores de la posición del fondo con los valores de los contadores de los bucles y ambos empiezan con el valor cero, por ende, el primer elemento tiene "-0px" de top y left, respectivamente.

Si quisieras obtener las coordenadas de cualquiera de los elementos generados, deberías utilizar la propiedad target del objeto del evento:

Código Javascript:

function getImagePosition(event){
    if (event.target.className == "imagen"){
        var demo = event.target.style.backgroundPosition;
        alert(demo.toString());
    }
}
 

De esta manera, si el elemento directamente afectado por el clic posee como clase a la cadena "imagen", tomas la posición de su fondo.

NOTA: Cuando asocias una función manejadora a un evento que se registra en un elemento del DOM, el objeto del evento es el primer argumento por defecto, a menos de que se especifique otro; por eso es que, en el ejemplo, lo defino de esa manera, sin tener que pasarlo como argumento.

Un saludo

[Sirakx]

Iniciado por Alexis88

Antes de indicar la manera en la que puedes seleccionar a cualquiera de dichos elementos, debes saber que jamás debes de repetir el mismo id dentro del mismo documento HTML. Puedes repetir clases o nombres, pero nunca un id. Recuerda siempre que se trata de un dato único.

Ahora bien. El problema surge precisamente por intentar tomar a un elemento cuyo dato identificador se repite en otros elementos existentes en el mismo documento. Cuando intentas hacer algo semejante, solo logras obtener al primero de todos los elementos, y como estableces los valores de la posición del fondo con los valores de los contadores de los bucles y ambos empiezan con el valor cero, por ende, el primer elemento tiene "-0px" de top y left, respectivamente.

Si quisieras obtener las coordenadas de cualquiera de los elementos generados, deberías utilizar la propiedad [URL="https://developer.mozilla.org/en-US/docs/Web/API/Event/target"][inline]target[/inline][/URL] del [URL="https://developer.mozilla.org/es/docs/Web/API/Event"]objeto del evento[/URL]:

Código Javascript:

function getImagePosition(event){
    if (event.target.className == "imagen"){
        var demo = event.target.style.backgroundPosition;
        alert(demo.toString());
    }
}
 

De esta manera, si el elemento directamente afectado por el clic posee como clase a la cadena "imagen", tomas la posición de su fondo.

NOTA: Cuando asocias una función manejadora a un evento que se registra en un elemento del DOM, el objeto del evento es el primer argumento por defecto, a menos de que se especifique otro; por eso es que, en el ejemplo, lo defino de esa manera, sin tener que pasarlo como argumento.

Un saludo

Muy muchas gracias! con respecto a lo que dices que no se debe repetir la misma ID y pongo el evento target que me comentas, esta bien si lo dejo así o necesito cambiar los ids para que no se repitan?

[Alexis88]

Si lo haces de la forma en la que te lo sugerí, los id no serán necesarios.