Tekstiliukus JavaScript-nuolilla

Tehdään nyt tekstiliukus nuolilla. Tämä tarkoittaa, että teksti vaihtuu ei ajastimella, vaan nuolen klikkauksella. Lisätään nuolet HTML-koodiimme:

html<a href="" id="left">←</a>
<a href="" id="right">→</a>
<div id="slider"></div>

Tämän liukusen ratkaisun pääominaisuus on, että tekstien laskurimuuttujan on oltava yhteinen nuoliemme klikkauskäsittelijöille:

javascriptlet i = 0; // ulkoinen muuttuja

left.addEventListener('click', function() {
  // vähennä i:tä 1:llä
  // ja tulosta teksti numerolla i
});
right.addEventListener('click', function() {
  // lisää i:tä 1:llä
  // ja tulosta teksti numerolla i
});

Ja toinen hienous on, että sekä vähennettäessä i että lisättäessä, ei voi mennä lukuihin, jotka ovat pienempiä kuin nolla ja suurempia kuin taulukon viimeinen alkio taulukosta.