title: Fade in and out word in sentence for one loop
body: <p>I have been trying to get one word in a sentence from an HTML page to go through one loop of changing. I only want it to loop once but now that I have gotten the code to loop once I can not see the words.</p>
  
  <p>I used jQuery to make it fade in and out and I know it is incrementing, they just do not appear on the screen from the array. The first and last words appear but nothing from the array in between. </p>
  
  <p>I have found ways to make a never ending loop with the array but I want it to stop once it reaches the last index and stay on one word after that.</p>
  
  <p>Any help or idea for another way to solve this is super welcome. </p>
  
  <pre class="lang-css prettyprint-override"><code>#changeMainText{
      color: #34495E;
      opacity: 1;
      transition: opacity 0.5s;
  }
  .hide{
      opacity: 0 !important;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="main"&gt;
      &lt;h1&gt;I am &lt;span id="changeMainText" style="color:#34495E"&gt;a Product
      Manager&lt;/span&gt;.&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
      var mainText = ["a Programmer", "a Web Developer", "a Student"];
      var counter = -1;
      var textInterval;
      var elem = document.getElementById("changeMainText");
      var elem1 = "-1";
      textInterval = setInterval(changeText(counter), 2500);
  
      function changeText(counter) {
          elem.classList.add('hide');
          setTimeout(function() {
              elem.innerHTML = mainText[counter];
              elem.classList.remove('hide');
              counter = counter + 1;
              document.getElementById("changeMainText").style
                  .color = "#34495E";
              if (counter &lt; mainText.length) {
                  elem.innerHTML = mainText[counter];
                  changeText(counter);
              }
              if (counter == 3) {
                  document.getElementById("changeMainText").style
                      .color = "red";
                  elem.innerHTML = "a Person";
                  clearInterval(textInterval);
              }
          }, 2500);
      }
  });
  </code></pre>