Javascript error: [elementname] has no properties

Question

I'm doing some maintenance coding on a webapp and I am getting a javascript error of the form: "[elementname] has no properties"

Part of the code is being generated on the fly with an AJAX call that changes innerHTML for part of the page, after this is finished I need to copy a piece of data from a hidden input field to a visible input field. So we have the destination field: <input id="dest" name="dest" value="0">
And the source field: <input id="source" name="source" value="1">
Now when the ajax runs it overwrites the innerHTML of the div that source is in, so the source field now reads: <input id="source" name="source" value="2">

Ok after the javascript line that copies the ajax data to innerHTML the next line is: document.getElementById('dest').value = document.getElementById('source').value;

I get the following error: Error: document.getElementById("source") has no properties

(I also tried document.formname.source and document.formname.dest and same problem)

What am I missing?

Note1: The page is fully loaded and the element exists. The ajax call only happens after a user action and replaces the html section that the element is in.

Note2: As for not using innerHTML, this is how the codebase was given to me, and in order to remove it I would need to rewrite all the ajax calls, which is not in the scope of the current maintenance cycle.

Note3: the innerHTML is updated with the new data, a whole table with data and formatting is being copied, I am trying to add a boolean to the end of this big chunk, instead of creating a whole new ajax call for one boolean. It looks like that is what I will have to do... as my hack on the end then copy method is not working.

Extra pair of eyes FTW.

Yeah I had a couple guys take a look here at work and they found my simple typing mistake... I swear I had those right to begin with, but hey we live and learn...

Thanks for the help guys.

Answer 1

Generally you shouldn't use innerHTML, but create elements using DOM-methods. I cannot say if this is your problem.

Answer 2

Make sure your code runs AFTER the page fully loads. If your code runs before the element you are looking for is rendered, this type of error will occur.

Answer 3

What your describing is this functionality:

<div id="test2">
    <input id="source" value="0" />
</div>
<input id="dest" value="1" />

<script type="text/javascript" charset="utf-8">
//<![CDATA[
function pageLoad()
{
    var container = document.getElementById('test2');
    container.innerHTML = "<input id='source' value='2' />";
    var source = document.getElementById('source');
    var dest = document.getElementById('dest');
    dest.value = source.value;
}
//]]>
</script>

This works in common browsers (I checked in IE, Firefox and Safari); are you using some other browser or are you sure that it created the elements correct on innerHTML action?

Answer 4

"[elementname] has no properties" is javascript error speak for "the element you tried to reference doesn't exist or is nil"

This means you've got one or more of a few possible problems:

1. Your page hasn't rendered yet and you're trying to reference it before it exists
2. You've got a spelling error
3. You've named your id the same as a reserved word (submit on a submit button for instance)
4. What you think you're referencing you're really not (a passed variable that isn't what you think you're passing)

Answer 5

It sounds like the DOM isn't being updated with the new elements to me.

For that matter, why are you rewriting the entire div just to change the source input? Wouldn't it be just as easy to change source's value directly?

Answer 6

This is a stretch, but just may be the trick - I have seen this before and this hack actually worked.

So, you said:

Ok after the javascript line that copies the ajax data to innerHTML the next line is: document.getElementById('dest').value = document.getElementById('source').value;

Change that line to this:

setTimeout(function() {
   document.getElementById("dest").value = document.getElementById("source").value;
}, 10);

You really shouldn't need this, but it is possible that the time between your setting the innerHTML and then trying to access the "source" element is so fast that the browser is unable to find it. I know, sounds completely whack, but I have seen browsers do this in certain instances for some reason that is beyond me.