I have a problem with my application and I do not know what the reason is. He tells me the error of the title.
I can not modify anything in CSS or HTML. That is to say that the error is in the .js but I do not know how to see it ..
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>