I have isolated a hard-to-track bug in a large application to the following minimum working example:
<html>
<head>
<title>Test page</title>
<script type="text/javascript" language="JavaScript">
function OnClickHandler (t) {
t.disabled = true;
var n = parseInt (t.getAttribute ("num"));
document.body.appendChild (document.createTextNode (
"num = " + t.getAttribute ("num") + ", checked = " + t.checked.toString () + " | "
));
t.setAttribute ("num", n + 1);
t.disabled = false;
}
</script>
</head>
<body>
<input type="checkbox" num="0" onclick="OnClickHandler(this)" />
<br />
</body>
</html>
What I am expecting is that there will be perfect synchronisation between the value of the num attribute and the checked state of the check box. But this condition does not hold, something that can be seen by clicking on the check box very rapidly. The following is a sample output:
Input: two very rapid clicks, short pause, two very rapid clicks,
short pause, single clicknum = 0, checked = true | num = 1, checked = true | num = 2, checked
= false | num = 3, checked = false | num = 4, checked = true |
The intention of the logic is that the num attribute only change when the check state changes. A lot of the subsequent logic of the application depends on this synchronisation. What is the recommended way to implement this synchronization?
Have you tried using onchange with the checkbox rather than onclick?