<div id="type"></div>

#type {
  font-size: 2rem;
  padding: 10px;
  background: #f9f9f9;
  margin: 2rem;
  display: table;
  min-width: 1rem;
  min-height: 2rem;
}
/*
Flashing caret
#type:after {
  content: "|";
  margin-left: 10px;
  animation: caret 0.3s infinite;
  opacity: 0;
}
@keyframes caret {
  50% {
    opacity: 1;
  }
}
*/

(function (d) {
  "use strict";
  const typeText = [
    "Abraham Lincoln",
    "George Washington",
    "Ronald Reagan",
    "John F Kennedy"
  ];
  const myElement = d.getElementById("type");

  var convertArray = typeText[0].split("");
  var timeLoop;
  var pos = 0;
  var increment = 1;
  var counter = 0;

  function textLoop() {
    myElement.innerHTML = convertArray.slice(0, pos).join("");
    pos += increment;
    if (pos === convertArray.length) {
      increment = -increment;
    }
    if (pos === 0) {
      increment = 1;
      counter++;
      if (counter === typeText.length) {
        counter = 0;
      }
      convertArray = typeText[counter].split("");
    }
    timeLoop = setTimeout(textLoop, 100);
  }
  textLoop();
})(document);