0

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>

1 respuesta 1

2

El listener que tienes en DOMContentLoaded sólo debiera tener lo justo y necesario para correr.

document.addEventListener('DOMContentLoaded', function() {
    var btnRotate = document.getElementById('brotar1');
    btnRotate.addEventListener('click', mouColorsEsquerra);
  /**
   *   iniColors s'executa al carregar la pagina.
   *   Pinta a la pagina els colors que tenim a la llistaColors 
  */
  iniColors();
  updateColorName(llistaNomColors[0]);
});

Todas las demás variables y funciones debiesen estar afuera del listener.

var llistaColors = ["grey", "black", "blue", "yellow","red","purple", "green", "white", "orange", "pink"];
var llistaNomColors =["Gris", "negre", "blau", "Groc", "Vermell", "lila", "Verd", "blanc", "Taronja", "rosa"];

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){
		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');
	btnRotate.addEventListener('click', mouColorsEsquerra);
  /**
   *   iniColors s'executa al carregar la pagina.
   *   Pinta a la pagina els colors que tenim a la llistaColors 
  */
  iniColors();
  updateColorName(llistaNomColors[0]);
});
.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>

3
  • oooh!!! Es que aún voy perdida con el tema del DOM!! MIL GRACIAS!!!!
    – Montse Mkd
    el 15 mar. 2017 a las 19:37
  • mmm hay un pequeño error.. .rota más de lo que debería.. se salta colores.. T_T
    – Montse Mkd
    el 15 mar. 2017 a las 19:53
  • ya esta conseguido.. he anulado la linea : //btnRotate.addEventListener('click', mouColorsEsquerra);
    – Montse Mkd
    el 15 mar. 2017 a las 20:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.