Problem rotating an array

Question

Problem rotating an array

Navigation

#1 by (6 votes)
#2 by (3 votes)

3

I have problems with my program .. I think it's coding .. it's the first time I play javascript and I'm a bit lost ..

Basically what I have to get is that my array of colors moves ... that is, the gray color goes to the last one ... a rotation to the left ... There must be something wrong but I do not know how to see it ..

And then I need something else but in that I'm already more lost still .. I have to get that First color: tell me the color that is currently in first position ..

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>

javascript

asked by Montse Mkd 14.03.2017 в 19:44

source

2 answers

3

I'll give you another proposal; in this case the Array.shift() method is used (in contrast to unshift() used by Gustavo García ): this way the rotation will be from right to left. Another difference is that a single array is used to contain both the colors and their names (collection of objects with both properties): this way you do not have to be synchronizing two arrays separately.

Let's see what you think. Greetings.

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>

answered by 14.03.2017 в 20:38

Obtain the dimensions of an image in Javascript How is the usign (MySqlConnection) C # used?

score 6 · Accepted Answer

You can do it simply by using the methods Array#unshift and < a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Referencia/Objetos_globales/Array/pop"> Array#pop .

The unshift method adds one or more elements to the beginning of an array, while pop removes the last one from an array and returns it.

In each iteration, the following will happen:

The last element of colors is removed and returned.
This element is added to the start of the array.

In this way it gives the impression of "being rotated".

Example

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>