Only starting a function on button click?(javascript)

Question

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 below, 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!

http://stackoverflow.com/questions/6539706/can-you-count-clicks-on-a-certain-frame-in-an-animation-in-javascript This is related to this question.... — Naftali, Jul 05 '11 at 22:01

Naftali · Answer 1 · 2011-07-05T22:03:49.407

0

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/

edited Jul 05 '11 at 22:03

answered Jul 05 '11 at 21:58

Naftali

144,921
39
244
303

Thanks Neal, I appreciate all your help, I've gone through 3 different variations of this so far. :P Turns out your animation code was the best for what I'm trying to do. – Steven Jul 05 '11 at 22:44

T.J. Crowder · Answer 2 · 2011-07-05T22:04:27.527

0

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.

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.

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.

edited Jul 05 '11 at 22:04

answered Jul 05 '11 at 21:58

T.J. Crowder

1,031,962
187
1,923
1,875

I'm not saying I (necessarily) recommend it, but surely the "simplest" is to put the `onclick=...` inline in the HTML? – nnnnnn Jul 05 '11 at 23:38
@nnnnnn: Nah, then you have all these global functions running around, which can get complicated, and you have to remember to include the word "return" so you can prevent the default action. ;-) (Okay, that's a bit tongue-in-cheek. Mostly I didn't list that because it's not best practice, and the OP seemed happy with assigning handlers unobtrusively.) – T.J. Crowder Jul 06 '11 at 04:41
Ahah, I was just looking for something that works, of course there are probably cleaner ways of going about my entire project, but since I'm just beginning I just want to learn the syntax and such. I'll worry about the best/cleanest way of doing stuff later. – Steven Jul 06 '11 at 06:29
@T.J. Crowder - speaking of preventing the default action, that's kind of overkill when the control in question is just an `` - there's not really a default to prevent. I remember thinking that when I first read your answer and saw you'd included those `return false;` and `preventDefault()` statements in your functions. I'm trying to decide if it's a good habit to get into to just always do it to be sure not to forget in the cases where it is necessary. – nnnnnn Jul 06 '11 at 07:27
@nnnnnn: Agreed, for elements with no default action, going to lengths to prevent is is unnecessary. I don't do it in my own code, but I do it in code samples people may be applying to things with default actions, like links. :-) I should probably flag that up when I do it. – T.J. Crowder Jul 06 '11 at 07:40

Only starting a function on button click?(javascript)

2 Answers2

Linked