remove from array onClick, vanila js

by Farzad Cyrus

HTML

<a href="javascript:{}" id="a">Click Me</a>

CSS

body {
  background: #1C90F3;
  color: #fff;
  font-family: Tahoma;
  font-size: 12px;
}

body * {
  color: inherit;
  text-decoration: none;
}

a {
  border: 1px solid #fff;
  display: inline-block;
  min-width: 120px;
  text-align: center;
  line-height: 32px;
  padding: 0 16px;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15% 0 0 -15%;
  border-radius: 2px;
}

.error {
  background: #d14;
  color: #fff;
  border-color: #c03;
}

JavaScript

var arr = ['me', 'you', 'them', 'us'];

var a = document.getElementById('a');

a.addEventListener('click', function() {
  // print the last item in array
  // once displayed then remove it
  // the on next call do the same, always call the last item in array

  if (arr.length > 0) {

    a.innerHTML = arr[arr.length - 1];
    arr.splice(-1, 1);

  } else {
    a.className = 'error';
    a.innerHTML = 'No more items';
  }

});