I have this code which is supposed to hide and show a DIV by checking and unchecking a form checkbox using the control onChange event. It works in Chrome, Firefox, Safari and Opera but IE 8 and 9 refuse to cooperate... There are no error messages in the console. Anything I'm missing?
Thanks for any help!
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Demo</title>
<script type="text/javascript">
var divVisible = true;
function Passport() {
if (divVisible) {
document.getElementById('mydiv').style.visibility="hidden";
divVisible = false;
}
else {
document.getElementById('mydiv').style.visibility="visible";
divVisible = true;
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" onchange="Passport();" value="Passport">Passport
</form>
<div style="height: 100px; width: 100px; background-color: #ff0;" id="mydiv"></div>
</body>
</html>
I have this code which is supposed to hide and show a DIV by checking and unchecking a form checkbox using the control onChange event. It works in Chrome, Firefox, Safari and Opera but IE 8 and 9 refuse to cooperate... There are no error messages in the console. Anything I'm missing?
Thanks for any help!
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Demo</title>
<script type="text/javascript">
var divVisible = true;
function Passport() {
if (divVisible) {
document.getElementById('mydiv').style.visibility="hidden";
divVisible = false;
}
else {
document.getElementById('mydiv').style.visibility="visible";
divVisible = true;
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" onchange="Passport();" value="Passport">Passport
</form>
<div style="height: 100px; width: 100px; background-color: #ff0;" id="mydiv"></div>
</body>
</html>
-
1
Don't bind event handlers inline (as the
<input>attribute). Use eitheronchangeproperty oraddEventListener/attachEventmethods. I won't explain them to you. There are plenty about them on the web. – matewka Commented Nov 25, 2013 at 17:42 - 1 Are you having the check box lose its focus? See: stackoverflow./questions/10579019/… – falconspy Commented Nov 25, 2013 at 17:43
-
Why are you not using
.checkedto determine if it should be shown hidden? – epascarello Commented Nov 25, 2013 at 17:56 - I wasn't aware of the fact focus must go for the change to be efective. Thanks for the help. – Fabricio Commented Nov 26, 2013 at 9:24
- @epascarello Because this is not my code. :-) I was just trying to adapt it and faced the onchange issue. But I will do that for the final version. – Fabricio Commented Nov 26, 2013 at 9:32
3 Answers
Reset to default 3According to this answer
onchange in IE only fires when the checkbox loses focus. So if you tab to it, hit space a few times, tab out, you'll only get one onchange event, but several onclick events.
You should change your code to use the onclick event instead:
<input type="checkbox" onclick="Passport();" value="Passport">Passport</input>
A checkbox input will not fire any change events until the focus is lost. The input value changes everytime it's clicked.
Change onchange="Passport();" for onclick="Passport();"
Change the onchange to onclick since IE8 fires onchange when focus is lost
And adjust it based on the state of the checkbox
<input type="checkbox" onchange="Passport(this.checked);" id="passportCB" value="Passport"><label for="passportCB">Passport</label>
and the function
function Passport(state) {
document.getElementById('mydiv').style.visibility= state ? "hidden" : "visible";
}
I also added a label, so the user can click the text and toggle the checkbox state.