Good morning, and thank you in advance.
What I want is to change the color of the first circle, but not let me change any more until it returns to normal.
And then change the rest of the circles in the same way.
I have the following html:
<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>
My css file is the following:
* {
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;
}
And I repeat the process for each id (circle - circle8)
The part of JS that I have so far is the following:
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));
}
introducir el código aquí
I hope it works for you... you change the selected one... you can remove all the background and put only the active one.You have two fairly simple problems:
#
is used for ids not for classes, for classes a dot is used.class
, In your CSS it should say.circulo
.addEventListener
receives a reference to the function , not its result, so remove the parentheses fromcambiarColor(i)
. Should becirculos[i].addEventListener("click", cambiarColor)
With these changes you can get the desired result.