PDA

View Full Version : IE 7 document.getElementById() error



jay_rad
01-29-2007, 06:44 PM
I'm only getting the error in IE 7:

"A Runtime Error has occured.
Do You Wish to Debug?

Line: 150
Error: Object doesn't support this property or method."

This is my Javascript function:



function updateTotal(i, b) {
// Declare the HTML
totalHTML=i;
// Find the table cell
total=document.getElementById('total'); // THIS IS LINE 150
// Enter the HTML into the cell
total.innerHTML=totalHTML;
document.dayPlacement.subTotal.value=b;
}

I know it's a valid Id:



<tr>
<td height="47"></td>
<td><b>Sub - Total:</b></td>
<td><div align="right"><b id="total">0.00</b></div></td>
</tr>


I'm drawing a complete blank. Any help would be had. Also, it works just as expected in FireFox

mburt
01-29-2007, 07:25 PM
Where is the script located?
If it's:


In the head, it's fine
In the body above the div, it won't work. It won't have any properties. The div must be defined first.
In the body below the div, should be fine


Hope that helps. Let us know if you have any more problems.

Twey
01-29-2007, 08:01 PM
In the head, it's fineCode in the head is executed before any of the body is loaded.

You must make sure that the <div> exists before doing anything with it. Where do you call this function?
Also:
document.dayPlacement.subTotal.value=b;This is highly non-standard. Use:
document.forms['dayPlacement'].elements['subTotal'].value = b;

mburt
01-29-2007, 08:04 PM
Code in the head is executed before any of the body is loaded.
Yes, but when the code is within a function, it is ignored until called. So basically it reads the DIV before the function.
Even if you called the function:

window.onload = function() {updateTotal(i value,b value);}
It would still work.

Twey
01-29-2007, 08:30 PM
As I said, depending on where the function is called. Calling it onload like that is fine, but it could be called in the global scope in the head, or in the body before the <div> has been loaded.

jay_rad
01-29-2007, 09:32 PM
Code in the head is executed before any of the body is loaded.

You must make sure that the <div> exists before doing anything with it. Where do you call this function?

It's called in the body, as an onChange event handler


Also:
document.dayPlacement.subTotal.value=b;This is highly non-standard. Use:
document.forms['dayPlacement'].elements['subTotal'].value = b;

Sorry bout that... pretty new to JS, I'll change that over and start doing it that way.


Where is the script located?
If it's:


In the head, it's fine
In the body above the div, it won't work. It won't have any properties. The div must be defined first.
In the body below the div, should be fine


Hope that helps. Let us know if you have any more problems.

Right now it's in the body above the Div, but I changed it to the body below the Div and it still isn't working... same error.

mburt
01-29-2007, 09:33 PM
They way you had it first should work...
I think we've realized that it isn't the problem. Maybe a bug in IE? I'm not sure.

jay_rad
01-29-2007, 09:37 PM
Even when I tell IE to ignore this JS problem, it comes up with another, exact same thing. Elsewhere in the page I tell it to change the contents of a certain element, using the getElementById() function, but it doesn't work, same error.

mburt
01-29-2007, 09:40 PM
Is the table within a form?

jay_rad
01-29-2007, 09:44 PM
Yes, the table is within the form.

mburt
01-29-2007, 09:46 PM
Well that, sir, is your problem :)
You must replace total with this:

total=document.forms['formName'].elements['total']
/EDIT: Replace the above in red with the corresponding form name

jay_rad
01-29-2007, 09:47 PM
So I can't use getElementById if it's inside a form?

/EDIT: Here's the new code, still not working:



function updateTotal(i, b) {
// Declare the HTML
totalHTML=i;
// Find the table cell
total=document.forms['dayPlacement'].elements['total'];
// Enter the HTML into the cell
total.innerHTML=totalHTML;
document.forms['dayPlacement'].elements['subTotal'].value = b;
}


More of the HTML




<form name="dayPlacement" action="order_form2c.php" method="post" onsubmit="return validate()">

.....

<tr>
<td height="47"></td>
<td><b>Sub - Total:</b></td>
<td><div align="right"><b id="total">0.00</b></div></td>
</tr>

.....

</form>

mburt
01-29-2007, 09:49 PM
Because the document reads the form name first, and therefore document.getElementById has no properties.

jay_rad
01-29-2007, 09:56 PM
This:


total=document.forms['dayPlacement'].elements['total'];


And this:


total=document.forms['dayPlacement'].getElementById['total'];


Didn't work... do I need to put every step in there? Example:


total=document.forms['formName'].elements['parent'].elements['child'].elements['grandchild'].elements['total'];

mburt
01-29-2007, 10:00 PM
You didn't change the argument for document.forms:


document.forms['formName']..etc
The name of the form that holds your table has to go here ^^
formName doesn't exist on your page.

jay_rad
01-29-2007, 10:04 PM
Heh, I did, see:


This:


total=document.forms['dayPlacement'].elements['total'];


And this:


total=document.forms['dayPlacement'].getElementById['total'];


/EDIT:

Sorry, I was mistaken, here's my page layout:



<div>
<table>
<form>
<tr>
<td>
<div>

mburt
01-29-2007, 10:06 PM
Try:

document.forms['dayPlacement'].total

jay_rad
01-29-2007, 10:09 PM
That didn't work either...

mburt
01-29-2007, 10:11 PM
<div>
<table>
<form>
<tr>
<td>
<div>
^^ Isn't valid. You can't include forms inside the initial table tag. It will simply null the form. Try putting the form outside the table.

jay_rad
01-29-2007, 10:25 PM
Still gettin' the error:



function updateTotal(i, b) {
// Declare the HTML
totalHTML=i;
// Find the table cell
total=document.forms['dayPlacement'].total;
// Enter the HTML into the cell
total.innerHTML=totalHTML;
document.forms['dayPlacement'].elements['subTotal'].value = b;
}


That's what I'm at now...

Something interesting: (Using the IE Developer tool bar) If I click "View DOM", then "Find Element" and search by "Id" and type "total", it finds it onscreen...

mburt
01-29-2007, 10:33 PM
Did you read my last post? Putting <form> inside <table> isn't valid... try <table> then <form>. I have to go, but I'll check on it later.

jay_rad
01-29-2007, 10:41 PM
Yea I did, I moved the <form> so it was outside the <table> and it's still not workin'...

jay_rad
01-29-2007, 10:46 PM
I got it to work by changing to this



function updateTotal(i, b) {
// Declare the HTML
totalHTML=i;
// Enter the HTML into the cell
document.getElementById('total').innerHTML=totalHTML;
document.forms['dayPlacement'].elements['subTotal'].value = b;
}


If anyone knows why, I'd love to hear it...

ashandla
10-07-2009, 10:07 AM
You must use:
var total = document.getElementById('total');

Troy III
10-10-2009, 09:17 AM
I got it to work by changing to this



function updateTotal(i, b) {
totalHTML=i;
document.getElementById('total').innerHTML=totalHTML;
document.forms['dayPlacement'].elements['subTotal'].value = b;
}

If anyone knows why, I'd love to hear it...


Thats because you are not declaring your (total) as a variable in your first attempt.

var total=document.getElementById('total');

Troy III
10-10-2009, 09:20 AM
You must use:
var total = document.getElementById('total');

Sorry - your answer was to short I didn't see it.
Your answer was correct!