I have made a program but I would like to know how I can leave it better (I don't have to do it, but I'm curious).
I have the following code:
var llistaColors = ["grey", "black", "blue", "yellow","red","purple", "green", "white", "orange", "pink"];
var llistaNomColors =["Gris", "negre", "blau", "Groc", "Vermell", "lila", "Verd", "blanc", "Taronja", "rosa"];
/**
* iniColors s'executa al carregar la pagina.
* Pinta a la pagina els colors que tenim a la llistaColors
*/
function iniColors(){
for (i=0; i<llistaColors.length;i++){
pintaColors(i, llistaColors[i]);
}
}
function mouColorsEsquerra(){
llistaColors.unshift(llistaColors.pop());
llistaNomColors.unshift(llistaNomColors.pop());
updateColorName(llistaNomColors[0]);
iniColors();
}
function iniciaRotacio(){
llistaColors.unshift(llistaColors.pop());
llistaNomColors.unshift(llistaNomColors.pop());
updateColorName(llistaNomColors[0]);
iniColors();
btnRotate = true;
myVar = setInterval(function(){
llistaColors.unshift(llistaColors.pop());
llistaNomColors.unshift(llistaNomColors.pop());
updateColorName(llistaNomColors[0]);
iniColors();
}, 100);
}
function aturaRotacio(){
clearInterval(myVar);
}
function pintaColors(i, color){
var colorDivs = document.querySelectorAll('.colordiv');
colorDivs[i].style.backgroundColor = color;
}
function updateColorName(name){
var currentColor = document.getElementById('primerColor');
currentColor.textContent = name;
}
document.addEventListener('DOMContentLoaded', function() {
var btnRotate = document.getElementById('brotar1');
});
.contenedorColors {
margin-bottom:100px;
}
.colordiv {
float:left;
height: 40px;
width: 40px;
border: 1px solid black;
}
.info {
clear:left;
margin-top:20px;
}
.info button {
background-color: white; /* Green */
border: 2px solid #555555;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.info p {
font-size: 20px;
}
#colorDetall {
display:none;
width: 600px;
height: 340px;
}
.repte {
float:left;
visibility:hidden;
}
.colorRepte {
clear:left;
margin-left:150px;
height: 60px;
width: 60px;
border: 1px solid black;
}
.repte p {
font-size: 20px;
margin-left:50px;
}
/*estils finestra repteResultats */
#contenedor {
text-align: center;
}
.lletraGran {
font-size: 40px;
font-weight: bold;
text-shadow: 2px 2px gray;
}
.missatge {
display:none;
}
.estadistiques-taula{
margin-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: left;
font-size: 20px;
}
<body onload="iniColors()">
<h1>Mou colors (3ra versió)</h1>
<div id="contenedorColors" class="contenedorColors">
<div id="color0" class="colordiv"></div>
<div id="color1" class="colordiv"></div>
<div id="color2" class="colordiv"></div>
<div id="color3" class="colordiv"></div>
<div id="color4" class="colordiv"></div>
<div id="color5" class="colordiv"></div>
<div id="color6" class="colordiv"></div>
<div id="color7" class="colordiv"></div>
<div id="color8" class="colordiv"></div>
<div id="color9" class="colordiv"></div>
<div id="repte" class="repte">
<div id="colorRepte" class="colorRepte"></div>
<p>Repte: Atura'l en aquest color </p>
</div>
</div>
<div id="info" class="info">
<p>
<button id="brotar1" type="button" onclick="mouColorsEsquerra()">rotar 1</button>
<button id="brotar" type="button" onclick="iniciaRotacio()">rotar (<<)</button>
<button id="bparar" type="button" onclick="aturaRotacio()">aturar</button>
</p>
<p>Primer color: <span id="primerColor"></span></p>
</div>
</body>
When I hit rotate ("rotate 1" button) it's perfect. But when I hit the "rotate (<<)" button (which calls iniciaRotacio()
), the problem I have is that hitting it should turn it on (which it does), but if I hit it again it shouldn't speed it up.
The problem comes to me that when I click on "aturate" (to stop iniciaRotacio()
), if I have given it several times to "rotate (<<)", it does not work for me. Is there a way so that hitting startRotatio() makes it work only once?
Something you can do:
myVar
and assign the valuenull
iniciaRotacio
check if itmyVar
is definedclearInterval
, put backmyVar
with the valuenull
This way you'll be creating a "semaphore" that will check that
setInterval
it can only be called once instead of multiple times (which is the problem you're running into).Your code with those changes would look like this: