Hola, tengo el siguiente código:
<!DOCTYPE html>
<html>
<head>
<style>
.boton_inactivo {
border: 1px solid black;
margin: 5px;
background: green;
}
.boton_activo {
border: 1px solid black;
margin: 5px;
background: yellow;
}
</style>
</head>
<body>
<ul>
<li><a class="boton_inactivo">prueba1</a></li>
<li><a class="boton_inactivo">prueba2</a></li>
<li><a class="boton_inactivo">prueba3</a></li>
<li><a class="boton_inactivo">prueba4</a></li>
<li><a class="boton_inactivo">prueba5</a></li>
<li><a class="boton_activo">Prueba6</a></li>
</ul>
<button onclick="seleccionar()">Cambiar</button>
<script>
function seleccionar() {
if (document.getElementsByClassName("boton_inactivo") .length > 0) {
var boton = document.getElementsByClassName("boton_inactivo");
var i;
for (i = 0; i <= boton.length; i++) {
alert (i);
boton[i].className = "boton_activo";
}
}
}
</script>
</body>
</html>
La idea es que tengo una serie de botones (en realidad son etiquetas <a href>) y pretendo que al pulsar un botón estas cambien de estilo.
He elaborado (modificando una que encontré) esta función que en teoria deberia hacerlo, pero no entiendo por qué se comporta de esta forma.
Cuando pulso el botón, teoricamente los elementos se cargan en el array boton[x] y les modifica el artibuto className, pero lo extraño es que solo lo hace con los elementos impares, es decir, solo cambia prueba1, prueba3 y prueba5....
Por mas vueltas que le doy y mas pruebas que hago no consigo encontrarle ninguna lógica.
Un saludo