how do I update innerHTML in a for loop using a while loop?
<p>Thought I had this in the bag...guess I was wrong:</p>

<p>Expected behavior - page loads, then for each element in the array it updates my innerHTML value using setTimeout</p>

<p>Observed behavior - On my hosting it seems to update the value just one time, then it breaks my css before becoming unresponsive. I threw in an alert to see if it's ever running on jsFiddle and it appears to <strong>not</strong> be running so there's also that </p>

<p>The markup:</p>

<pre><code>&lt;button type="button" id="ctaButton" class="cta btn btn-lg btn-success pulsate" data-keyboard="true" data-toggle="modal" data-target="#contactUs"&gt;Get Started Today&lt;/button&gt;
</code></pre>

<p>The JS:</p>

<pre><code>$(warmup());

function warmup(){
    //sanity check
confirm("working???");
    setTimeout(changeCTAtext, 3000);
}



 function changeCTAtext(){

    var ctaList = [ 'Complementary Quotes', 'Book Your Consultation', 'Get Started Today' ];
    var myField = document.getElementById("ctaButton");

    while (true){
        for (var i = 0; i&lt;ctaList.length, i++;){
    setTimeout('myField.innerHTML = ctaList[i];', 1000);
        };
    };
};
</code></pre>

<p>and here is the <em>mandatory</em> <a href="https://jsfiddle.net/gpf8jtg6/12/" rel="nofollow">fiddle</a> as usually requested.</p>