Javascript: change XML data on button click

I'm doing a similarly functioning website as http://ift.tt/S3zxPe

The idea is that every time you click the button, the phrase changes to the next one in the list (if last - starts the loop again). How should I edit my present code?

I pasted my code (HTML; XML at JS): http://ift.tt/1yk83XH

HTML:

<div class="phrase">            
            <script>
             if (window.XMLHttpRequest)
               {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.open("GET","facts.xml",false);
            xmlhttp.send();
            xmlDoc=xmlhttp.responseXML; 

            var x=xmlDoc.getElementsByTagName("facts");
            for (i=0;i<x.length;i++)
              { 
              document.write(x[i].getElementsByTagName("fact")[0].childNodes[1].nodeValue);
              }
            </script>
        </div>

        <div class="meh">
            <a class="link" href="/another">Meh, another!</a>
        </div>

and XML:

<facts>
   <fact>
    <![CDATA[
        First fact <br />
        Second line
    ]]>
   </fact>

   <fact>
    The second fact
    </fact>
</facts>

Thank you!