[SOLUCIONADO] problema con variable / bucle for

[yvelisse]

Hola,

Soy muy nueva en esto, así que tal vez la pregunta es muy obvia. Éste es el código que da problemas:

Código:

function iniciar(){
  var botones, x
  botones=document.querySelectorAll('#barra ul li');
  for(x = 0; x < botones.length; x++){ 
   botones[x].addEventListener('mouseover',cambiar)
  function cambiar(){
   botones.className = "sombra"
     };
   };
  }
addEventListener('load', iniciar);

Quiero que al colocar el ratón sobre cualquiera de los elementos li, éste adquiera la clase sombra. Simplemente es una práctica de un ejemplo de utilidad de className. ¿Alguien me puede decir por qué no me reconoce a botones[x] dentro de la función cambiar? (en cambio si la reconoce cuando se dispara el evento mouseover).

¡gracias de antemano!

[jluishg]

Lo que veo es que en la funcion cambiar botones no existe, la tenias que enviar como parametro.

saludos
jlh

[yvelisse]

¿Podrías ser un poco más explícito? ¿Más para novatas?

No veo cómo hacerlo en este caso.

¡Gracias!

[jluishg]

Ok, no se si dentro de la funcion cambiar() el objeto o variable "botones" exista, puede probar dos cosas:

1. dentro has un alert("hola") para ver si al menos ingresa
2. en firefox hay un plugin que te permite debuguear los resultados y te dira si hay error de sintaxis a nivel javascript.

saludos
jlh

[yvelisse]

¡Lo he logrado!
Sí, si coloco un alerta dentro de la función cambiar, lo reconocía, pero es como si las variables dentro de la función estuvieran fuera de su ámbito, cosa que no acabo de entender. Si dentro del alert pongo, por ejemplo, el mensaje (botones[1]) se muestra el texto 'undefined' en la alerta.
En Chrome puse un breakpoint dentro de la función, y al evaluar las variables en la cónsola, devuelve ésto:
botones: MouseEvent
botones[x]:<not avalable>
x: <not avalable>

Pero también me dio una pista que no sabría explicar ahora y se me ocurrió sustituir dentro de la función la referencia botones[x] con this . ¡y funcionó!
Así que la mejoré para que al salir el ratón del elemento elimine la clase sombra. El resultado es éste, por si sirve a alguien:

Código Javascript:

function iniciar(){
  var botones, x
  botones=document.querySelectorAll('#barra ul li');
  for(x = 0; x < botones.length; x++){ 
   botones[x].addEventListener('mouseover',cambiar)
   botones[x].addEventListener('mouseout',volver)
 
 function cambiar(botones){
  this.className='sombra'
    };
  };
 function volver(botones){
  this.className='null'
    };
   };
addEventListener('load', iniciar);
 

Yve - Muy contenta con el resultado :)

Gracias jluishg por la paciencia.

[jluishg]

Que alegria haberte ayudado.