Only starting a function on button click?(javascript)

How would I make a start button for a function? I have 9 different functions for different animations on my page. I need to figure out how execute the animations only when a button is clicked(a start button) The reason why I want to do this is because I'm making a simple game, but I'd like the end user to be able to interact with the elements of the game before they start(I already have this done with jQuery, but at the moment I can only move the elements while the game is running which isn't what I want to do.) A quick example of the animate function is

function animate0(pos) {
    pos %= urls.length;
    var animation0 = document.getElementById('animation0');
    var counter = document.getElementById('counter');
    animation0.src = urls[pos];
    if (pos == 1) {
        animation0.onclick = function() {
            counter.innerHTML = parseInt(counter.innerHTML) + 1;
        }
    }
    else {
        animation0.onclick = function() {
            //do nothing
        }
    }
    setTimeout(function() {
        animate0(++pos);
    }, (Math.random()*500) + 1000);
}

Then to execute the animation I use this

window.onload = function() { //Frames go belo开发者_运维知识库w, seperated by commas format= , "URL");
    urls = new Array("http://i51.tinypic.com/sxheeo.gif", "http://i56.tinypic.com/2i3tyw.gif");
    animate0(0);

To display the animation on the page,

<img id='animation0' src ='http://i51.tinypic.com/sxheeo.gif'/>

Thanks!

document.getElementById('start').onclick = function(){
    animate0(0);
}

This is assuming you have an element with id='start'

Here is a fiddle: http://jsfiddle.net/maniator/TQqJ8/13/

I think I may be misunderstanding your question, but if for instance you had this button (or indeed just about any other element):

<input type="button" id="theButton" value="Click Me">

Then you can hook up a handler for its click event in any of several ways.

1. The simplest, but least powerful, is DOM0-style:

   document.getElementById("theButton").onclick = function() {
       animate0(0);
       return false;
   };
   

   The problem with DOM0 handlers is that there can only be one handler/event type on each element.

2. DOM2-style, which on standards-based browsers looks like this:

   document.getElementById("theButton").addEventListener('click', function(event) {
       event.preventDefault();
       animate0(0);
   }, false);
   

   ...and on older IE looks like this:

   document.getElementById("theButton").attachEvent('onclick', function() {
       animate0(0);
       return false;
   });
   

Note the differences, the event name is "click" in the DOM2 standard, "onclick" for Microsoft, and the event object is passed in the first argument in the DOM2 standard, but it's a global variable (I didn't use) on Microsoft's older browsers. (Not dissing Microsoft, in the IE5 - IE6 timeframe, they did a lot to innovate web browsers, including ajax, innerHTML, and in fact multiple handlers per event per element via attachEvent, which predates the DOM2 standard. It's just after IE6 that they let the ball drop for...well...more than a decade.)

In all of those cases, I've called animate0 directly, since it does its first loop and then schedules the next bit itself. You could, of course, use setTimeout to schedule even the first bit to be asynchronous (probably just use a delay of 0, which will be 5-10 ms on most browsers). It depends on what you want to do.