Eventos onmouseover y onmouseout en varios divs

[Marh]

Hola.

Soy novato en javascript y pues solicito su ayuda urgente, les explico mi problema.
Tengo un menu lateral, el cual esta maquetado por puros divs y quiero aplicarle a cada div las propiedades onmouseover y onmouseout, este es el codigo que he estado manejando pero solo hace efecto a un solo div(al primero) y al resto no. El codigo es el sgte:

function resaltar(elEvento)
{
var evento = elEvento || window.event;
switch(evento.type)
{
case 'mouseover':
this.style.backgroundColor = 'black';
break;
case 'mouseout':
this.style.backgroundColor = 'blue';
break;
}
}
window.onload = function(){
document.getElementById("seccion").onmouseover = resaltar;
document.getElementById("seccion").onmouseout = resaltar;
}

<div id="seccion" class="menu"></div>
<div id="seccion" class="menu"></div>
<div id="seccion" class="menu"></div>
.......
.......

He aplicado un for a los document.getElementById... previamente cambiando el id de los divs siendo estos numeros enteros empezando en 0.

Ojala puedan ayudarme ya que esto me tiene parado, tal vez las soluciones que tienen vayan por el mismo camino que ya comente pero no he tenido fortuna en conseguirlo.
Muchas Gracias.
Saludos.

[David]

El id NO puede repetirse en el documento. Debe ser único. Lo que puedes hacer es que los ids sean sucesivos, seccion1, seccion2, seccion3 y hacer un bucle for para que los recorra. O, en todo caso, buscar todos los div con className "menu"

[Marh]

Hola.

Soy novato en javascript y pues solicito su ayuda urgente, les explico mi problema.
Tengo un menu lateral, el cual esta maquetado por puros divs y quiero aplicarle a cada div las propiedades onmouseover y onmouseout, este es el codigo que he estado manejando pero solo hace efecto a un solo div(al primero) y al resto no. El codigo es el sgte:

function resaltar(elEvento)
{
var evento = elEvento || window.event;
switch(evento.type)
{
case 'mouseover':
this.style.backgroundColor = 'black';
break;
case 'mouseout':
this.style.backgroundColor = 'blue';
break;
}
}
window.onload = function(){
document.getElementById("seccion").onmouseover = resaltar;
document.getElementById("seccion").onmouseout = resaltar;
}

<div id="seccion" class="menu"></div>
<div id="seccion" class="menu"></div>
<div id="seccion" class="menu"></div>
.......
.......

He aplicado un for a los document.getElementById... previamente cambiando el id de los divs siendo estos numeros enteros empezando en 0.

Ojala puedan ayudarme ya que esto me tiene parado, tal vez las soluciones que tienen vayan por el mismo camino que ya comente pero no he tenido fortuna en conseguirlo.
Muchas Gracias.
Saludos.

[David]

Bienvenido al foro, Marh.

Por favor, no repitas temas, está en contra de las http://www.forosdelweb.com/f74/polit...el-web-101485/

Sigue aquí:
http://www.forosdelweb.com/f13/event...s-divs-685091/

[Marh]

hola davida, gracias por responder, pues si claro de todas maneras como puse en el primer post, los id tienen q ser distintos, eso ok, y claro en un bucle for, pero no he tenido exito lograndolo, tal vez tu puedas darme una mano, muchas gracias, saludos

[David]

Si nos dices cómo lo has intentado y qué parte está fallando podremos ayudarte mejor.

[Marh]

Aqui esta lo qye he estado intentando...


function resaltar(elEvento)
{
var evento = elEvento || window.event;
switch(evento.type)
{
case 'mouseover':
this.style.backgroundColor = 'black';
break;
case 'mouseout':
this.style.backgroundColor = 'blue';
break;
}
}
window.onload = function()
{

for( var i=0;i<31;i++)
{
document.getElementById("i").onmouseover = resaltar;
document.getElementById("i").onmouseout = resaltar;
}
}

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
......

[David]

En principio, hay dos problemas.

El id no debe ser sólo numero. Recomendación, déjalo como "id1", "id2" o algún otro prefijo que describa la función que cumplen.

El segundo problema: getElementById("i"), al encerrar i entre comillas, se toma como una cadena literal, no como variable, usa getElementById("id" + i), en este caso le agregas la cadena (prefijo) que tendrán todos los ids de los div.

[Marh]

hola david, he probado como recomendaste y este es el codigo y me sale el sgte error:
Mensaje: 'document.getElementById(...)' es nulo o no es un objeto
Línea: 40
Carácter: 2
Código: 0

function resaltar(elEvento)
{
var evento = elEvento || window.event;
switch(evento.type)
{
case 'mouseover':
this.style.backgroundColor = 'black';
break;
case 'mouseout':
this.style.backgroundColor = 'blue';
break;
}
}
window.onload = function()
{

for( var i=0;i<31;i++)
{
document.getElementById("id" + i).onmouseover = resaltar;
document.getElementById("id" + i).onmouseout = resaltar;
}
}


<div id="id1">
<div id="id2">
<div id="id3">
.......

[David]

El índice empieza con 0 y termina en 31. Debes comprobar que existan elementos con esos id (se me hace que id0 no existe y por eso te da error)

[Marh]

Hola David...

Muchas gracias por tu ayuda, hice los cambios que me dijiste y todo va bien, agradezco tu tiempo y amabilidad.
Saludos.