Show the next and previous element in an array

Question

Show the next and previous element in an array

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

Hi, I have the following code in codepen: link

var quotes = [
  '“All war is a symptom of man\'s failure as a thinking animal.” ― John Steinbeck',
  '“Strictly speaking, we do not make decisions, decisions make us.” ― José Saramago',
  '“The only way to deal with an unfree world is to become so absolutely free that your very existence is an act of rebellion.” ― Albert Camus',
  '“A lie is more comfortable than doubt, more useful than love, more lasting than truth.” ― Gabriel García Márquez',
  '“Try again. Fail again. Fail better.” ― Samuel Beckett',
  '“No man chooses evil because it is evil; he only mistakes it for happiness, the good he seeks.” ― Mary Shelley',
  '“The constant happiness is curiosity.” ― Alice Munro',
  '“Always do sober what you said you\'d do drunk. That will teach you to keep your mouth shut.” ― Ernest Hemingway',
];


function show() {

  document.getElementById("ShowQuotes").innerHTML = quotes[0];
}

window.onload = show;

function next() {
  for (var i = 0; i < quotes.length; i++) {
    var nextquote = //Aquí es donde me pierdo.
  }
  document.getElementById("ShowQuotes").innerHTML = nextquote;

}

What I want is that by clicking on next the next element of the array is displayed but I can not see how I could do it. I also want to know how I could push them back when clicking on another link.

I hope that please someone can help me, I would like it a lot because as you can see I am very new with javascript.

javascript

asked by SidPendragon 29.12.2017 в 05:08

source

2 answers

Print directly to printer connected via JS or PHP eliminate successive equal chains

score 2 · Answer 1

Create a variable to keep the position in which you are, each time you move from one position to another is modified. I give you as an example the part of the following element

var pos = 0;
function next(){
  pos = pos + 1; 
  var nextquote = quotes[pos];
  document.getElementById("ShowQuotes").innerHTML = nextquote;
}

To do the go to the previous position is the same only that subtracting.

The controls would be missing when trying to access positions outside the array and so on.

score 2 · Answer 2

You could also extend the functionality of the array quotes by adding a property to maintain the current position (in my example the property current ) and methods that change to the next position ( next ) and previous ( prev ) and that in turn return the new current element.

In this way your example could stay something like this:

var quotes = [
  '“All war is a symptom of man\'s failure as a thinking animal.” ― John Steinbeck',
  '“Strictly speaking, we do not make decisions, decisions make us.” ― José Saramago',
  '“The only way to deal with an unfree world is to become so absolutely free that your very existence is an act of rebellion.” ― Albert Camus',
  '“A lie is more comfortable than doubt, more useful than love, more lasting than truth.” ― Gabriel García Márquez',
  '“Try again. Fail again. Fail better.” ― Samuel Beckett',
  '“No man chooses evil because it is evil; he only mistakes it for happiness, the good he seeks.” ― Mary Shelley',
  '“The constant happiness is curiosity.” ― Alice Munro',
  '“Always do sober what you said you\'d do drunk. That will teach you to keep your mouth shut.” ― Ernest Hemingway',
];
quotes.current = 0;
quotes.prev = function(){
  return this.current===0
    ? null
    : this[--this.current];
}
quotes.next = function(){
  return this.current===this.length-1
    ? null
    : this[++this.current];
}

function show() {

  document.getElementById("ShowQuotes").innerHTML = quotes[quotes.current];
}

window.onload = show;

function next() {
  document.getElementById("ShowQuotes").innerHTML = quotes.next();
}
function prev(){
  document.getElementById("ShowQuotes").innerHTML = quotes.prev();
}

#ShowQuotes{
  display: block;
  height: 100px;
}

<span id="ShowQuotes"></span>
<button onclick="prev()">Anterior</button>
<button onclick="next()">Siguiente</button>