<button id="fact-button">Click me for a fact</button>
<p id="facts"></p>
(function () {
  const btn = document.querySelector("#fact-button");
  const facts = document.querySelector("#facts");
  var i = 0;
  var fact = "";
  btn.addEventListener("click", function (event) {
    switch (i) {
      case 0:
        fact = "This is fact 1";
        break;
      case 1:
        fact = "This is fact 2";
        break;
      case 2:
        fact = "This is fact 3";
        break;
      case 3:
        fact = "This is fact 4";
        break;
      default:
        fact = "No more Facts !!";
    }
    facts.textContent = fact;
    i++;
  });
})();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.