JavaScript - Duda con funcion Js

 
Vista:

Duda con funcion Js

Publicado por Alex (3 intervenciones) el 09/03/2018 10:52:26
Hola, tengo el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!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
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Duda con funcion Js

Publicado por xve (2100 intervenciones) el 10/03/2018 08:40:44
Hola Alex, el problema que tienes, es que el valor de la longitud de boton.length, va cambiando a cada iteración, ya que cada vez hay menos elementos con el class="boton_inactivo"

Modifica tu función así, para que veas como va variando la longitud de los elementos del boton:
1
2
3
4
5
6
7
8
9
10
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(boton.length);
	          boton[i].className = " boton_activo";
          }
      }
}

La solución pasa por añadir en vez de reemplazar... prueba tu código así:
1
2
3
4
5
6
7
8
9
function seleccionar() {
      if (document.getElementsByClassName("boton_inactivo").length > 0) {
          var boton = document.getElementsByClassName("boton_inactivo");
	      var i;
	      for (i = 0; i < boton.length; i++) {
	          boton[i].className += " boton_activo";
          }
      }
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Duda con funcion Js

Publicado por Alex (3 intervenciones) el 12/03/2018 09:46:10
Mil gracias Xve, entendí el problema y tu solución me funcionó a la perfección.

Solo me surge una pequeña duda... la página funciona, pero en el debugger me arroja un error:

TypeError: boton[i] is undefined

Se refiere precisamente a esa linea:

boton[i].className += " boton_activo";



Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Duda con funcion Js

Publicado por Alex (3 intervenciones) el 12/03/2018 10:03:51
Ok, resuelto. Culpa mia.

con el trajín de las pruebas habia colado un <= que no tocaba.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Duda con funcion Js

Publicado por xve (2100 intervenciones) el 12/03/2018 10:35:45
Ah, ok, perfecto!!! me alegro que lo hayas encontrado!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar