IE 8 error

**autotrader** · 10-20-2009 10:35 AM

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>

**slaughters** · 10-20-2009 01:53 PM

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>

**Kor** · 10-20-2009 01:56 PM

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.

**slaughters** · 10-20-2009 02:08 PM

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

**autotrader** · 10-20-2009 02:10 PM

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.

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>

**Kor** · 10-20-2009 02:34 PM

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>

**autotrader** · 10-20-2009 02:56 PM

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.

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>

Thread: IE 8 error

Thread Tools

Display

IE 8 error

Problem Resolved

Thank you Kor - Your Code Works

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions