On-change/click firing even though no changes where made

Question

I'm trying to fire off a function when the drop down option is selected, but I don't want to have inline JavaScript within the HTML. For some reason when I run the script a change/click is registered automatically. Why?

JSFiddle: http://jsfiddle.net/nysteve/QHumL/22/

var time = new Date();
var timestamp = time.toString("hh:mm:ss");

//create color from time stamp and print within div
function timeToHexColor(){
    var showlist = document.getElementById("board").innerHTML += 
                   "#" + timestamp.split(":").join("") + "<br/>";
}

//Print colors based on time interval
function Colors(interval) {
    this.interval = interval;
    switch (this.interval) {
        case 'second': 
            x = setInterval(timeToHexColor,1000);
            setTimeout(stopColors, 5000);
            break;
        case 'minute': 
            x = setInterval(timeToHexColor,60000);
            setTimeout(stopColors, 5000);
            break;       
        case 'hour': 
            x = setInterval(timeToHexColor,60000*60);
            setTimeout(stopColors, 5000);
            break;
        case 'day': 
            x = setInterval(timeToHexColor,60000*1440);
            setTimeout(stopColors, 5000);
            break;
        default: 
    }
}

//For demo purposes manually kill priting after 5 seconds
function stopColors() {
    clearInterval(x);
}

//Activate printing by selecting an option.
function generateColors(interval){
    document.getElementById("options").onclick = Colors(interval);
    /*same result with onchange
     I even sent the JSFiddle settings per this link:
      http://bit.ly/1gev7zR*/
}

generateColors('second');

This is a duplicate of http://stackoverflow.com/questions/3249128/javascript-event-handler-arguments => see the responses there for your problem. — Jealie, Oct 05 '13 at 20:56

score 1 · Accepted Answer · answered Oct 05 '13 at 20:57

1

You can't attach an event listener like that, that calls Colors function immediately.

You can wrap it in a function or you can use addEventListener,

function generateColors(interval){
    document.getElementById("options").onclick = function() {
        Colors(interval);
    }
}

Second method,

function generateColors(interval) {
    var el = document.getElementById("options");
    el.addEventListener("click", function () {
        Colors(interval);
    });
}

Updated DEMO

answered Oct 05 '13 at 20:57

Okan Kocyigit

13,203
18
70
129

1

Still confused why it fires instantly; I'm using onclick not click method. Regardless, used the jQuery method mentioned as an answer in the link posted by Jealie: $("target").change(function(){myfunction();}); Still new to JS, but isn't the jQuery answer essentially doing the same thing as your native answer —creating an anonymous function for the existing event listener change? I guess jQuery saves writing all this native code. Thanks for this answer though! =) – brooklynsweb Oct 05 '13 at 21:26
2

@brooklynsweb: `element.onclick` expects a function handler, not a function value. So, `element.onclick = myfunction;` works as expected and does not trigger a call to myfunction() when set, but `element.onclick = myfunction();` evaluates the value returned by myfunction in setting element.onclick. – Jealie Oct 05 '13 at 21:49

On-change/click firing even though no changes where made

1 Answers1