Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » ¿Cómo cambiar los elementos uno a uno con JS?

JavaScript - ¿Cómo cambiar los elementos uno a uno con JS?

Volver
Nuevo Tema
<<>>
 
Vista:

¿Cómo cambiar los elementos uno a uno con JS?

Publicado por Jorge (1 intervención) el 16/11/2021 14:07:58
Buenos días y gracias de antemano.
Lo que quiero es cambiar el color del primer circulo, pero que no me deje cambiar ninguno más hasta que este no vuelva a la normalidad.
Y luego ir cambiando de la misma forma el resto de circulos.
Tengo el siguiente html:
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
<body>
    <div id="arriba" class="arriba"></div>
    <div id="principal" class="principal">
      <div>
        <span id="circulo" class="circulo">1</span>
      </div>
      <div>
        <span id="circulo1" class="circulo">2</span>
        <span id="circulo2" class="circulo">3</span>
      </div>
      <div>
        <span id="circulo3" class="circulo">4</span>
        <span id="circulo4" class="circulo">5</span>
        <span id="circulo5" class="circulo">6</span>
      </div>
      <div>
        <span id="circulo6" class="circulo">7</span>
        <span id="circulo7" class="circulo">8</span>
      </div>
      <div>
        <span id="circulo8" class="circulo">9</span>
      </div>
    </div>
    <div id="abajo" class="abajo"></div>
  </body>

Mi archivo css es el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
* {
    margin: 0px;
    padding: 0px;
}
html,
body {
 
    height: 100%;
    text-align: center;
}
#circulo {
    width: 100px;
    height: 100px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #5cb85c;
}

Y repito el proceso para cada id (circulo - circulo8)
La parte de JS que tengo hasta ahora es la siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
function cambiarColor(i) {
  //alert("La celda tiene id: "+ i.target.id);
  alert("Esta entrando a cambiar color");
 
 
}
 
let circulos = document.getElementsByClassName("circulo");
 
for (let i = 0; i < circulos.length; i++) {
  circulos[i].addEventListener("click", cambiarColor(i));
 
}
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 Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

¿Cómo cambiar los elementos uno a uno con JS?

Publicado por Alejandro (540 intervenciones) el 16/11/2021 16:39:08
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
	<head>
		<style>
		* {
			margin: 0px;
			padding: 0px;
		}
 
		html,
		body {
			height: 100%;
			text-align: center;
		}
 
		.circulo {
			width: 100px;
			height: 100px;
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			background: #5cb85c;
			cursor:pointer;
		}
 
		.active{
			background-color:red;
			color:white;
		}
		</style>
	</head>
 
	<body>
		<div id="arriba" class="arriba"></div>
		<div id="principal" class="principal">
			<div>
				<span id="circulo" class="circulo">1</span>
			</div>
 
			<div>
				<span id="circulo1" class="circulo">2</span>
				<span id="circulo2" class="circulo">3</span>
			</div>
 
			<div>
				<span id="circulo3" class="circulo">4</span>
				<span id="circulo4" class="circulo">5</span>
				<span id="circulo5" class="circulo">6</span>
			</div>
 
			<div>
				<span id="circulo6" class="circulo">7</span>
				<span id="circulo7" class="circulo">8</span>
			</div>
 
			<div>
				<span id="circulo8" class="circulo">9</span>
			</div>
		</div>
		<div id="abajo" class="abajo"></div>
 
		<script>
		function cambiarColor(e) {
			activo = document.getElementsByClassName('active');
			if( activo.length!=0 ){
				if( activo[0]==e.target ){
					e.target.classList.remove('active');
				}else{
					alert('Ya hay un circulo activo.');
				}
			}else{
				e.target.classList.add('active');
			}
		}
 
		let circulos = document.getElementsByClassName("circulo");
		for (let i = 0; i < circulos.length; i++) {
			circulos[i].addEventListener("click", cambiarColor);
		}
		</script>
	</body>
</html>
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