Tengo problemas con mi programa.. Creo que es de codificación.. es la primera vez que toco javascript y voy algo perdida..
Básicamente lo que tengo que conseguir es que mi array de colores se mueva.. es decir el color gris pase al último.. una rotación a la izquierda... Tiene que haber algo mal pero no sé verlo..
Y luego necesito otra cosa más que en eso ya voy más perdida aún.. Tengo que conseguir que Primer color: me diga el color que hay actualmente en primera posición..
var llistaColors = ["grey", "black", "blue", "yellow", "red", "purple", "green", "white", "orange", "pink"];
var llistaNomColors = ["Gris", "negre", "blau", "Groc", "Vermell", "lila", "Verd", "blanc", "Taronja", "rosa"];
var llistaRotada = llistaColors;
function iniColors() {
for (i = 0; i < llistaColors.length; i++) {
document.getElementById("color" + i).style.backgroundColor = llistaColors[i];
}
var primer = llistaRotada[0];
function mouColorsEsquerra(llistaRotada) {
for (x = 0; x < llistaRotada.length - 1; x++)
llistaRotada[x] = llistaRotada[x + 1];
llistaRotada[x] = primero;
return llistaRotada
}
function pintaColors() {
for (y = 0; y < llistaRotada.length; i++) {
document.getElementById("color" + i).style.backgroundColor = llistaRotada[y];
}
}
}
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Mou Colors</title>
<link rel="stylesheet" href="colors.css">
<script src="js/colors1.js"></script>
</head>
<body onload="iniColors()">
<h1>Mou colors</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>
<div id="info" class="info">
<p>
<button id="brotar1" type="button" onclick="mouColorsEsquerra()">rotar 1</button>
</p>
<p>Primer color: <span id="primerColor"><span>
</p>
</div>
</body>
</html>