3

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>

2 respuestas 2

6

Puedes lograrlo simplemente usando los métodos Array#unshift y Array#pop.

El método unshift agrega uno o más elementos al inicio de un array, mientras que pop elimina el último de un array y lo devuelve.

En cada iteración, sucederá lo siguiente:

  • Se elimina el último elemento de colors y se devuelve.
  • Se agrega éste elemento al inicio del array.

De esta manera da la impresión de "estar rotando".

Ejemplo

document.addEventListener('DOMContentLoaded', function() {
  var colors = ["grey", "black", "blue", "yellow", "red", "purple", "green", "white", "orange", "pink"];
  var names = ["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', rotate);

  // inicializamos la paleta y el primer color
  palette();
  updateColorName(names[0]);

  function palette() {
    for (i = 0; i < colors.length; i++) {
      paint(i, colors[i]);
    }
  }

  function rotate() {
    colors.unshift(colors.pop());
    names.unshift(names.pop());

    updateColorName(names[0]);
    palette();
    this.disabled = true;

    window.setInterval(function() {
      colors.unshift(colors.pop());
      names.unshift(names.pop());

      updateColorName(names[0]);
      palette();
    }, 1000);
  }

  function paint(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;
}

button:disabled {
  background-color: #ddd;
  border-color: #ddd;
  color: #eee;
  cursor: not-allowed;
}
<!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>
  <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">rotar 1</button>
    </p>
    <p>Primer color: <span id="primerColor"></span>
    </p>
  </div>
</body>

</html>

14
  • 1
    Sucede porque el código se está ejecutando cuando aún no ha cargado el DOM. Es importante que, cuando trabajes manipulando el DOM como en este caso para cambiar el nombre, pongas el código dentro de document.addEventListener('DOMContentLoaded', function () { // tu codigo });. De esta manera tu código se ejecutará cuando el DOM ya ha sido cargado.
    – gugadev
    el 14 mar. 2017 a las 19:52
  • 1
    No, todo el código que tengas va dentro de eso. Se ejecuta una sola vez.
    – gugadev
    el 14 mar. 2017 a las 20:00
  • 1
    @MontseMdk he actualizado mi respuesta poniéndote el código para que solo le modifiques los nombres. Analiza el código y estúdialo. Cualquier duda, puedes publicarla.
    – gugadev
    el 14 mar. 2017 a las 20:11
  • 1
    Jaja, no te preocupes. Lo he hecho así para que veas el comportamiento. Solo elimina esta parte de la función rotate: this.disabled = true; window.setInterval(function() { colors.unshift(colors.pop()); names.unshift(names.pop()); updateColorName(names[0]); palette(); }, 1000);
    – gugadev
    el 14 mar. 2017 a las 20:20
  • 1
    No, no es lógico. Mira su los nombres coinciden. Cuando veas errores de tipo is undefined quiere decir que el atributo o función que has llamado no está definida o no existe. Puede pasar que olvides una letra del nombre de la función.
    – gugadev
    el 14 mar. 2017 a las 20:26
3

Te pongo otra propuesta; en este caso se utiliza el método Array.shift() (a diferencia de unshift() usado por Gustavo García): de esta manera la rotación será de derecha a izquierda. Otra diferencia es que se utiliza un solo array para contener tanto los colores como sus nombres (colección de objetos con ambas propiedades): de esta manera no se tiene que estar sincronizando dos arreglos (arrays) por separado.

A ver qué te parece. Saludos.

var llistaColors = [
  { color: 'grey', nombre: 'Gris' },
  { color: 'black', nombre: 'negre' },
  { color: 'blue', nombre: 'blau' },
  { color: 'yellow', nombre: 'Groc' },
  { color: 'red', nombre: 'Vermell' },
  { color: 'purple', nombre: 'lila' },
  { color: 'green', nombre: 'Verd' },
  { color: 'white', nombre: 'blanc' },
  { color: 'orange', nombre: 'Taronja' },
  { color: 'pink', nombre: 'rosa' }
];

function iniColors() {
  pintaColors(llistaColors);
}

function pintaColors(arr){
  for(y = 0; y < arr.length; y++){
    document.getElementById("color"+y).style.backgroundColor = arr[y].color;
  }
  document.getElementById("primerColor").innerHTML = arr[0].nombre;
}

function rotar(arr) {
  var llistaRotada = llistaColors;
  var prim = llistaRotada.shift();
  llistaRotada.push(prim);
  pintaColors(llistaRotada);
}
.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="rotar()">rotar 1</button>
    </p>
    <p>Primer color: <span id="primerColor"><span>
			</p>
		</div>
	</body>
</html>

3
  • mil gracias!! El problema es que no puedo tocar los arrays de como estan! xD
    – Montse Mkd
    el 14 mar. 2017 a las 19:51
  • 1
    Entonces revisa la respuesta de Gustavo arriba: él no cambió tus arrays (sólo los nombres). Si necesitas rotar en el modo que yo definí (derecha a izquierda) revisa el código que pongo, usando shift en vez de unshift y utilizando una variable intermedia para apoyo del "salto". el 14 mar. 2017 a las 19:54
  • muchas gracias me viene bien aprender varias formas! :)
    – Montse Mkd
    el 14 mar. 2017 a las 20:00

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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