var selected = 0

var opts = document.getElementById('options').children

var input = document.getElementById('input')

var l = document.getElementById('arrow-left')

var r = document.getElementById('arrow-right')

​

// on n'affiche que le premier, on cache les autres

for (var i = 0; i < opts.length; i++) {

  if (i !== 0) opts[i].style.display = 'none'

}

​

// on màj l'input au chargement de la page

updateInput()

​

// modifie la valeur affiché

function show(index) {

  // on cache l'ancienne valeur

  opts[selected].style.display = 'none'

  // on affiche la nouvelle

  opts[index].style.display = 'inline-block'

  // on selectionne la nouvelle

  selected = index

}

​

// màj l'input

function updateInput() {

  input.setAttribute('value', opts[selected].getAttribute('value'))

}

​

// quand on clique pour aller à gauche

l.addEventListener('click', function() {

  // si on est au premier el, on passe au dernier

  if (selected === 0) show(opts.length - 1)

  // sinon, on prend l'el précedent

  else show(selected - 1)

})

​

// pareil pour la droite

r.addEventListener('click', function() {

  // si on est au dernier el, on passe au premier

  if (selected === opts.length - 1) show(0)

  // sinon, on prend l'el suivant

  else show(selected + 1)

})

​

// on màj l'input quand on clique gauche ou droite

l.addEventListener('click', updateIndex)

r.addEventListener('click', updateIndex)