How can I make this timer start onclick

I have made this timer script but I can't seem to make it so ti starts onclick.

Here is my whole code:

<script type="text/javascript">
function display( notifier, str ) {
  document.getElementById(notifier).innerHTML = str;
}

function toMinuteAndSecond( x ) {
  return Math.floor(x/60) + ":" + x%60;
}

function setTimer( remain, actions ) {
  (function countdown() {
    display("countdown", toMinuteAndSecond(remain));actions[remain] && actions[remain]();
    (remain -= 1) >= 0 && setTimeout(arguments.callee, 1000);
  })();
}

setTimer(20, {
               20: function () { 
                    display("notifier", "seconds"); 
               },
               1: function () { 
                    display("notifier", "second");
               },

               0: function () { 
                    display("notifier", "seconds");
               }
             }
);
</script>

<!--Start Redirect Countdown--&g开发者_运维百科t;
<div id="redirect_box" style="display:block;">
Redirecting in <span id="countdown"></span> <span id="notifier"></span>
</div>
<!--End Redirect Countdown-->

<div id="buttonn">Skip >></div>

Skip >> is suppose be the button that starts the timer and the ID, countdown is the actual countdown. And, notifier is just an extra ID. I hope someone can help

Is this what you're after? http://jsfiddle.net/JAAulde/Mnqaj/

If so, all you needed to do is grab the buttonn element and assign an onclick to it.

That's, ummm, quite a thingy...

First, this:

<div id="buttonn">Skip >></div>

should be this:

<div id="buttonn">Skip &gt;&gt;</div>

Second, where is the code that hooks up the Skip button to your timer? I don't see it in your question. If it's missing, then there is no click handler for the button div so that's why nothing gets started.

Third, I would also wonder if you meant for the name to be "buttonn" with two n's at the end? If that's a typo, it could also explain why your event handler isn't getting hooked up.

You should not create object properties using number literals. The number will be converted to a string, so better to create them as strings in the first place:

   '20': function () { 

That way there's no ambiguity in the property name.

Running the code, I get the error:

document.getElementById(notifier) is null

Moving the element with id countdown above the script fixes that.

To start the timer "onclick", simply create a function that makes the call to setTimer:

function startTimer() {
    setTimer(
        /* setTimer code */
    );
}

Then start it from the page:

<button onclick="startTimer()">Start timer</button>