www.webdeveloper.com
Results 1 to 7 of 7

Thread: IE 8 error

  1. #1
    Join Date
    Oct 2009
    Posts
    3

    Question 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>

  2. #2
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    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>

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.
    Last edited by Kor; 10-20-2009 at 03:04 PM.

  4. #4
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    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

  5. #5
    Join Date
    Oct 2009
    Posts
    3

    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 View Post
    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>

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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>

  7. #7
    Join Date
    Oct 2009
    Posts
    3

    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 View Post
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles