Javascript error: [file_name] has no properties

Question

I am doing some service coding in webapp and I get a javascript error of the form: "[elementname] has no properties"

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

Well after the javascript line that copies the ajax data to innerHTML, the following line: 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.sourceand document.formname.destthe same problem)

What am I missing?

Note1: The page is fully loaded and the item exists. Ajax is called only after user action and replaces the html section where this element is located.

Note 2. As for not using innerHTML, the code base was provided to me, and for its removal I would have to rewrite all ajax calls that are not part of the current maintenance cycle.

Note3: innerHTML is updated with new data, the entire table with data and formatting is copied, I'm trying to add a boolean to the end of this large fragment instead of creating a completely new ajax call for one boolean. It seems like this is what I will need to do ... like my hack at the end, then the copy method does not work.

Extra pair of FTW eyes.

, , , ... , , ...

.

Answer 1

"[elementname] " javascript, ", , "

, :

• , .
• .
• , (, )
• , , ( , , , )

Answer 2

, . , , , .

Answer 3

:

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

( IE, Firefox Safari); - , innerHTML?

Answer 4

, DOM .

, div ? ?

Answer 5

, - , .

, :

javascript, ajax innerHTML, :    document.getElementById('dest'). value = document.getElementById('source'). value;

:

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

, , innerHTML "source" , . , , , - , .

Answer 6

, innerHTML, , DOM-. , .