1

Estoy empezando con JavaScript y la programación en general y necesito mostrar el id de un div sobre el que tengo situado el ratón, formando dicho div parte de una lista de divs pertenecientes a un div padre "principal". Para ello, hago lo siguiente:

var principal = document.getElementById('principal');
var lista = principal.children;

Suponiendo que tenga la lista bien creada... ¿Cómo agrego un evento que me muestre el id del div sobre el que tengo situado el ratón? Sé que es con el evento "mouseover" pero he hecho varias pruebas y no acaba de funcionar como yo quiero.

Espero haberme explicado con claridad ¡Gracias de antemano y un saludo!

2
  • Sin ver el HTML es complicado saber si el problema lo tienes ahí. Podría ser que no estés usando un selector correcto para el elemento HTML al que deseas asociar la función onmouseover. Sin ver también el JS con el que estás tratando de mostrar la ID no sabemos si el problema está en la manera que tratas de hacerlo. Y sin saber a que te refieres con "no acaba de funcionar como yo quiero" no sabemos el problema que estás teniendo.
    – phpMyGuel
    el 10 dic. 2018 a las 14:18
  • Cuéntanos un poco más acerca de esas pruebas que has hecho. Pon algo de código de lo que has probado, algo con lo que podamos reproducir lo que quieres hacer exactamente, los problemas que has tenido (errores o similar)... el 10 dic. 2018 a las 14:39

1 respuesta 1

2

puedes hacerlo asi:

//seleccionamos el id principal y obtenemos sus hijos!
var principal = document.getElementById("principal").children;

// interamos por cada hijo 
for(let i=0; i < principal.length;i++){
  // le asiganos un evento mouseover
  principal[i].addEventListener("mouseover",(e)=>{
  // obtenemos el target o seleccion y obtenemos su id
  // y lo colocamos como texto en span sele
  document.getElementById("sele").innerText = e.target.id;
});
}
<div>seleccion: <span id="sele" style="color:green;font-weight: bold;"> </span></div>	
<div id="principal" style="cursor:pointer">
		<div id="ids1">1</div>
		<div id="ids2">2</div>
		<div id="ids3">3</div>
		<div id="ids4">4</div>
		<div id="ids5">5</div>
		<div id="ids6">6</div>
	</div>

1
  • mil gracias! en cuanto llegue a casa lo pruebo :D
    – SamuNieto7
    el 10 dic. 2018 a las 15:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.