Tengo un problema en mi aplicación y no sé cual es el motivo. Me dice el error del titulo.
No puedo modificar nada del CSS ni del HTML. Es decir que el error se encuentra en el .js pero no sé verlo..
document.addEventListener('DOMContentLoaded', function() {
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 btnRotate = document.getElementById('brotar1');
var colorDivs = document.querySelectorAll('.colordiv');
var currentColor = document.getElementById('primerColor');
btnRotate.addEventListener('click', mouColorsEsquerra);
iniColors();
updateColorName(llistaNomColors[0]);
/**
* 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 pintaColors(i, color){
colorDivs[i].style.backgroundColor = color;
}
function updateColorName(name){
currentColor.textContent = name;
}
});
.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>