I want the alertMe function to be called only when the button is clicked, but it gets called (the setInterval gets called which calls that) AS SOON AS THE PAGE LOADS. But if I take the pageLoad function away, then startButton is null and I can't do anything with it.Thanks in advance, guys!

/when user clicks start, start the animation
window.onload = pageLoad;

function pageLoad() {
    var startButton = document.getElementById("start");

    startButton.onclick = setInterval(alertMe,200);
}

function alertMe() {
  alert("hi");
}

I want the alertMe function to be called only when the button is clicked, but it gets called (the setInterval gets called which calls that) AS SOON AS THE PAGE LOADS. But if I take the pageLoad function away, then startButton is null and I can't do anything with it.Thanks in advance, guys!

/when user clicks start, start the animation
window.onload = pageLoad;

function pageLoad() {
    var startButton = document.getElementById("start");

    startButton.onclick = setInterval(alertMe,200);
}

function alertMe() {
  alert("hi");
}

• javascript
• setinterval

2 Answers 2

function pageLoad() {
    var startButton = document.getElementById("start");

    startButton.onclick = alertMe;
}

function alertMe() {
  setInterval(function(){
    alert("hi");
  },200);
}

Move your interval inside the alertMe function, and pass that as a reference to startButton.onclick

DEMO: http://jsfiddle.net/gHS4a/

basically you need to do it like this:

startButton.onclick = function() {
    interval = setInterval(alertMe, 200);
}

what it does is it sends reference to the alertMe function

another way would be:

startButton.onclick = function() {
    interval = setInterval(function(){
        alertMe();
    }, 200);
}

which would send a reference to an anonymous function which will call the alertMe function