IE 8 error

Printable View

10-20-2009, 10:35 AM
autotrader

IE 8 error

Hi there.

I am a newbie in Javascript. Here is a little code that I want to use on my website (I've copied it from somewhere on internet). It adds the values of checkboxes and display them. It works fine in almost all browsers except IE7/8 (I've checked it is not working specifically in IE8). The error is: invalid argument on line 37 Char 1. Can anybody help me please?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>52573</title>
</head>
<body>
<form>
<fieldset id="checkboxes">
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="4">
<input type="checkbox" value="8">
<input type="checkbox" value="16">
<input type="checkbox" value="32">
</fieldset>
</form>

<p>The total is: <span id="total"> </span></p>

<script type="text/javascript">

var checkboxes = document.getElementById("checkboxes").getElementsByTagName("input");
for(var i = 0; i < checkboxes.length; i++)
{
checkboxes[i].onclick = tally;
}

function tally()
{
var total = 0;
for(var i = 0; i < checkboxes.length; i++)

{
if(checkboxes[i].checked)
{
total += parseInt(checkboxes[i].value);
}
}

document.getElementById("total").replaceChild( document.createTextNode(total), document.getElementById("total").firstChild);
}

tally();
</script>
</body>
</html>
10-20-2009, 01:53 PM
slaughters

It looks like IE 8 does not count a simple space as a textNode. So you need to put some initial value inside your "total" span.

Replace this line:

Code:

<p>The total is: <span id="total"> </span></p>

with this line:

Code:

<p>The total is: <span id="total">0</span></p>
10-20-2009, 01:56 PM
Kor

Code:

replaceChild( document.createTextNode(total), document.getElementById("total")

total. Don't name a variable same as an id, IE 7,8 don't like that. IE7,8 inherit the old IE versions' bad habit to find an element directly, as it would be the property of the window Global object.
10-20-2009, 02:08 PM
slaughters

What I think is happening with this line

Code:

document.getElementById("total").replaceChild( document.createTextNode(total), document.getElementById("total").firstChild);

is:

Grab the object with the id of "total", now replace one of it's children.
The child to replace is it's "firstChild".
Replace that with a new text node.

I think the error is that IE 8 does not initially see any children for "total" because for whatever reason it did not create a text node for the blank space when the page initially loads

P.S.

In addition to "total" you are also using "checkboxes" for both a variable name and an id
10-20-2009, 02:10 PM
autotrader

Problem Resolved

Thank you very much slaughters. You are the man. My problem is solved and the code is working perfectly in IE8 now.

Thank you very much. God bless you.

Quote:

Originally Posted by slaughters

It looks like IE 8 does not count a simple space as a textNode. So you need to put some initial value inside your "total" span.

Replace this line:

Code:

<p>The total is: <span id="total"> </span></p>

with this line:

Code:

<p>The total is: <span id="total">0</span></p>
10-20-2009, 02:34 PM
Kor

Maybe you should have a look on this approach:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function setEv(){ var check=document.getElementById('checkboxes').getElementsByTagName('input'), c, i=0; while(c=check[i++]){c.onclick=addvalue;} } function addvalue(){ var t=0; var check=this.parentNode.getElementsByTagName('input'), c, i=0; while(c=check[i++]){c.checked?t+=Number(c.value):null} document.getElementById('total').innerHTML=t; } onload = setEv; </script> </head> <body> <form> <fieldset id="checkboxes"> <input type="checkbox" value="1"> <input type="checkbox" value="2"> <input type="checkbox" value="4"> <input type="checkbox" value="8"> <input type="checkbox" value="16"> <input type="checkbox" value="32"> </fieldset> </form> <p>The total is: <span id="total"></span></p> </body> </html>
10-20-2009, 02:56 PM
autotrader

Thank you Kor - Your Code Works

I am really amazed by your professionalism. Your code also works perfectly. I have tested it for cross browser compatibility and it just works fine everywhere.

Thank you so very much.

Your forum is awesome.

God bless you.

Quote:

Originally Posted by Kor

Maybe you should have a look on this approach:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function setEv(){ var check=document.getElementById('checkboxes').getElementsByTagName('input'), c, i=0; while(c=check[i++]){c.onclick=addvalue;} } function addvalue(){ var t=0; var check=this.parentNode.getElementsByTagName('input'), c, i=0; while(c=check[i++]){c.checked?t+=Number(c.value):null} document.getElementById('total').innerHTML=t; } onload = setEv; </script> </head> <body> <form> <fieldset id="checkboxes"> <input type="checkbox" value="1"> <input type="checkbox" value="2"> <input type="checkbox" value="4"> <input type="checkbox" value="8"> <input type="checkbox" value="16"> <input type="checkbox" value="32"> </fieldset> </form> <p>The total is: <span id="total"></span></p> </body> </html>