javascript - Change event handler firing only once, jQuery -
i'm trying execute code when select element in dropdown menu. i'm using jquery's change(). problem once execute function first time. not respond other selected items (aka other changes). made test block @ bottom , code fire on every change. doing wrong in first change code?
jsfiddle: http://jsfiddle.net/nysteve/qhuml/#base
side question; noticed when ask question , select answer, of them appear on profile , questions not though selected answer. take time them register?
function timetohexcolor() { var color = math.floor(math.random() * 999999); if (color >= 0 && color <= 9 || color >= 1000 && color <= 9999) { color = "#00" + color; } else if (color >= 10 && color <= 99 || color >= 10000 && color <= 99999) { color = "#0" + color; } else if (color >= 100 && color <= 999) { color = "#000" + color; } else if (color > 999999) { color = "#" + (color - 1); } else { color = "#" + color; } document.getelementbyid("container").innerhtml += "<div style='border:solid 1px white;color:white;background-color:" + color + ";'>" + color + "</div>"; } function colors(interval) { this.interval = interval; switch (this.interval) { case 'second': document.getelementbyid('options').disabled = true; x = setinterval(timetohexcolor, 1000); settimeout(stopcolors, 10000); break; case 'minute': x = setinterval(timetohexcolor, 60000); document.getelementbyid('options').disabled = true; break; case 'hour': x = setinterval(timetohexcolor, 60000 * 60); document.getelementbyid('options').disabled = true; break; case 'day': x = setinterval(timetohexcolor, 1000); document.getelementbyid('options').disabled = true; settimeout(stopcolors, 10000); break; default: alert(this.interval + " not valid interval option"); break; } } function stopcolors() { clearinterval(x); document.getelementbyid('options').disabled = false; } $("#options").prop('selectedindex', -1); //this fire once , that's it. process getting halted? $("#options").change(function () { colors($("#options").val()); }); // test fire on change every time. $("#x").change(function () { alert($("#x").val()); });
i'm not sure why document.getelementbyid interfering clear interval , causing jquery unresponsive.
document.getelementbyid("container").innerhtml += "<div style='border:solid 1px white;color:white;background-color:" + color + ";'>" + color + "</div>";
if append using jquery instead don't have problem.
$("#container").append("<div style='border:solid 1px white;color:white;background-color:" + color + ";'>" + color + "</div>");
i added 100 miliseconds set timeout function run ten times instead of 9.
settimeout(stopcolors, 10100);
check out fiddle
Comments
Post a Comment