JavaScript - on body load next array element
<p>So I have an html file which calls a javascript function <strong>on body load</strong>. And I want to show an array element one after the other. On first load it should show "<strong>one</strong>" on the next load it should show "<strong>three</strong>" etc. 
But it keep's showing me the first word. Can you explain me what I'm doing wrong and suggest me a solution? Thank you very much in advance!</p>

<p>here is my HTML</p>

<pre><code>&lt;html lang="en"&gt;
&lt;head&gt;
&lt;script src="/style/js/wordSet.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;body onload="getWord()"&gt;
&lt;div id="character"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>and that's my <strong>wordSet.js</strong></p>

<pre><code>    function getWord(){
    var testList = ["one","three","right"]

       var resultSet = testList.shift();
        document.getElementById("character").innerHTML = resultSet;
}
</code></pre>