entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

-1voto

modificar los estilos a todos los elementos de mi lista

estoy intentando hacer una prueba pero tengo un problema al tratar de modificar el color de fondo del elemento de mi menu, tengo un menu de navegacion horizontal con tres elementos todos los elementos llevan un color de fondo azul, quiero que cuando se haga click en uno de estos elementos se cambia de color de fondo a verde, indiferentemente de cual se haya presionado.

<ul id="menu">
  <li>item1 </li>
  <li>item2</li>
  <li>item3</li>
</ul>

var items = document.getElementsBytagName('li')
items.addEventListener(onclick, function(){

                     style.backgroundColor="green"
})

cuando se hace un click sobre un elemento li este deberia de cambiar de color de fondo
esto debe ocurrir con todos los elementos, cada vez que se haga click sobre cualquier li debe cambiar de fondo solo el li que fue clickeado.
esto efecto es comun en todas las paginas, por ejemplo en la pagina de la w3c cuando se esta es una seccion del menu este se pone verde, cuando se cambia a otra seccion esto se pone en verde, espero haber sido suficientemnte expresivo

1 Respuesta

2votos

magarzon Puntos20570

Todo tu código es erróneo, además de ineficiente. Lo de la eficiencia lo dejaremos para otro día, porque introduce conceptos avanzados que te puede liar, así que haré las correcciones sobre tu código:

  1. La función se llama getElementsByTagName, con la T mayúscula, y no es la primera vez que te corrijo esto
  2. Efectivamente tienes que usar un for, porque el método anterior te da un array de items
  3. onclick tiene que ser click, e ir entre comillas, porque si no lo interpreta como una variable
  4. style es una variable no definida.

Absolutamente TODOS los errores te los dice o bien un IDE o bien la consola de desarrollador que viene incorporada con cualquier navegador, por lo que me hace sospechar que no utilizas ni lo uno ni lo otro.

El código que funciona, partiendo del tuyo, es este:

    var items = document.getElementsByTagName('li');
    var previous = null;
    for(var i=0; i<items.length; i++) {
    items[i].addEventListener('click', function () {
        if (previous) {
            previous.style.backgroundColor = "blue";
        }
        this.style.backgroundColor = "green";
        previous = this;
    })
    }

Por supuesto, esto se haría mejor con hojas de estilo y selectores, "apagando" aquel elemento que tenga la clase "selected" o similar, para no tener que guardar el previous.

steven comentado Feb 28

estoy haciendo las pruebas en un editor online famoso codepen, aun hay algunos bugs, ahora cada vez que doy click a un elemento li se pone verde ok, pero cuando le doy a otro este tambien se pone verde y a otro lo mismo y eso no es lo que buscaba, lo que quiero es que cuando le de click a uno se ponga en verde luego cuando le de click a otro li el anterior se restablesca a su color original.

 var items = document.getElementsByTagName('li');
 for(var i=0; i<items.length; i++) {
     items[i].addEventListener('click', function () {
         this.style.backgroundColor = "green";
     })
 }

por casulidad conoces la tecnica del event delegation, creo que lo podriamo utilizar para combatir el problema

magarzon comentado Feb 28

Perdona, no leí tu pregunta, la verdad es que venía directamente de tu comentario en la otra, donde no habías explicado eso. Te he cambiado la respuesta.

Y sí, lo del event delegation era lo que no quería explicarte para que no te compliques la vida y vengas con más dudas.

steven comentado Mar 1

no paras de sorprenderme, ahora si funciona de maravilla aunque no entendi porque le das un valor nulo a la variable y luego lo redeclaras con un this.

respecto al otro tema lo tomare en cuenta en otro momento. hay todavia una ultima duda, en una funcion listener se aceptan tres parametros el evento la funcion y luego esta el booleano, que cosa cambia de true a false, y por defecto como viene

magarzon comentado Mar 1

Aunque en javascript no da problemas con variables no definidas, a mí me gusta tenerlas definidas siempre de antemano, para acotar su ámbito (imagina que no la defino y hay por ahí una variable global que se llame igual, se fastidiaría algo), por eso defino el previous a null (también se podría dejar sin asignar valor, quedaría como undefined, que en este caso nos vale)

En cuanto al tercer parámetro, por defecto es false, se recomienda siempre incluirlo por compatibilidad hacia atrás (en los navegadores antiguos no era opcional) y cambia la manera de gestionar los eventos y la delegación de los mismos, mejor no te líes con eso.

steven comentado Mar 1

ahora me estoy interesando en el nuevo api media que permite tener acceso a la camara y al microfono y trasmitirlo en vivo, todavia no es un estandar pero ya muchos lo estan utilizando, cual es tu punto de vista

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta