firebox javascript bug reporting input checkbox state

M

Michael Repucci

I'm having an unexpected problem... curious if anyone can point out my
mistake, has a work-around solution, or has simply seen this before.

I'm using Javascript to add input checkbox elements to an xhtml page,
and would like to be able to query the state of these elements on
click. In IE7 this works fine but in Firefox 2 the current state isn't
reported correctly by either the checked or defaultChecked attributes.
I include below the text for an test.html and test.js which
demonstrate the problem I'm having in a simplified version.

----- test.html -----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<p>Please click my box!</p>
<p id="parody"></p>
<p>I've put my box in a box for you....</p>
</body>
</html>

----- test.js -----
window.onload = function() {
makeMybox();
}

function clickMybox(mybox) {
var checked = mybox.getAttribute("checked");
var defaultChecked = mybox.getAttribute("defaultChecked");
var value = mybox.getAttribute("value");
alert("value=" + value + "\n" + "checked=" + checked + "\n" +
"defaultChecked=" + defaultChecked);
listItems.style.display = (listItems.style.display=="list-
item") ? "none" : "list-item";
}

function makeMybox() {
var mybox = document.createElement("input");
mybox.setAttribute("type","checkbox");
mybox.setAttribute("name","myform");
mybox.setAttribute("value","mybox");
mybox.onclick = function() {
clickMybox(this);
}
var parody = document.getElementById("parody");
parody.style.margin = "20px";
parody.style.width = "20px";
parody.style.border = "solid black 5px";
parody.appendChild(mybox);
}
 
D

David Mark

I'm having an unexpected problem... curious if anyone can point out my
mistake, has a work-around solution, or has simply seen this before.

I'm using Javascript to add input checkbox elements to an xhtml page,
and would like to be able to query the state of these elements on
click. In IE7 this works fine but in Firefox 2 the current state isn't
reported correctly by either the checked or defaultChecked attributes.
Click to expand...

What is reported and what is the error (if any?)
I include below the text for an test.html and test.js which
demonstrate the problem I'm having in a simplified version.

----- test.html -----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<p>Please click my box!</p>
<p id="parody"></p>
<p>I've put my box in a box for you....</p>
</body>
</html>

----- test.js -----
window.onload = function() {
makeMybox();

}

function clickMybox(mybox) {
var checked = mybox.getAttribute("checked");
var defaultChecked = mybox.getAttribute("defaultChecked");
var value = mybox.getAttribute("value");
alert("value=" + value + "\n" + "checked=" + checked + "\n" +
"defaultChecked=" + defaultChecked);
listItems.style.display = (listItems.style.display=="list-
item") ? "none" : "list-item";

}

function makeMybox() {
var mybox = document.createElement("input");
mybox.setAttribute("type","checkbox");
mybox.setAttribute("name","myform");
mybox.setAttribute("value","mybox");
mybox.onclick = function() {
clickMybox(this);
}
Click to expand...


I think your problem is right here. I am no expert on closures and I
never do things like this with event handlers, except to bind DOM
events to object methods (in which case I use a prefabricated two-line
function I found on jibbering.com.) I do seem to recall reading of
differences between the handling of "this" in anonymous functions in
IE and Firefox. Try using the event's target element instead of
passing "this" to clickMyBox.
 
M

Martin Honnen

Michael said:
var checked = mybox.getAttribute("checked");
var defaultChecked = mybox.getAttribute("defaultChecked");
var value = mybox.getAttribute("value");
Click to expand...

Don't use getAttribute, unless you want to access the attribute value as
defined in the HTML markup. checked, defaultChecked and value are
properties of the input element object so access them as
mybox.checked
mybox.defaultChecked
mybox.value
and you will get the same result in Firefox and other browsers. IE's
implementation of getAttribute is simply broken.
 
D

David Mark

Don't use getAttribute, unless you want to access the attribute value as
defined in the HTML markup. checked, defaultChecked and value are
properties of the input element object so access them as
mybox.checked
mybox.defaultChecked
mybox.value
and you will get the same result in Firefox and other browsers. IE's
implementation of getAttribute is simply broken.
Click to expand...
Oops. I missed that. Isn't setAttribute broken in some way in
certain versions of IE (or perhaps all of them) as well? I recall
reading examples of it failing to add attributes to form elements. If
so, I don't understand how the OP's example is working in IE.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Reversing output of user input by using while loop... 2
Help with my responsive home page 2
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
[IE] Toggle checkbox state - onclick vs. onchange 0
Final chapter of "Learn PHP, MySQL and JavaScript" 3
Can't execute php to delete multiple rows in database 3
Survey details won't go through using php, ajax, Mysql 0
Very Basic CC Validation Javascript 0

Members online

Total: 84 (members: 2, guests: 82)
Robots: 472

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,817
Latest member
DicWeils

Latest Threads

Top