(Resolved) getElementById not working with Asynchronous Deployment

[JEllington]

Hello..

I have a tabular report that will not recognize an element using document.getElementById( "elmName" ) (loctated in the Header of a report), if the datapage is deployed using ASYNC deployment... 
<script type="text/javascript" src="http://b4.caspio.com/dp/d6a9blahblah/emb"></script>
returning a console message " VM3106:22 Uncaught TypeError: Cannot set property 'innerHTML' of null". If i put the  script in the console as..  document.getElementById( "elmName" ).innerHTML = '<a href="httpcodehere">Test Button</a>';
the script runs without errors and replaces the html in the <div id="elmName">Original Text</div>.
I have found if I use the legacy deployment ..
<script type="text/javascript" src="https://b4.caspio.com/scripts/e1.js"></script>
<script type="application/javascript">try{f_cbload("d6a9blahblah","https:");}catch(v_e){;}</script>

the  script runs document.getElementById without errors.
(I have tried running this script in other tabular report datapages deployed  asynchronously all with the same error and results. Then switching them to legacy deployment and the script runs without error.)

Can anyone give me any insight on why the  document.getElementById will not work if the datapage is using ASYNC deployment?

[thirdcharm]

Hi JEllington,

Please try the following scripts below and this also works on asynchronous deployments:

In the Header of your DataPage:

<div id="elmName">Original Text</div>

In the Footer of your DataPage:

<script>
document.getElementById("elmName").innerHTML = "Text changed!";
</script>

Then click "Preview" to check.

Note: Please make sure you only have one id of elmName declared in your page.

Let me know if this helps.

[JEllington]

Loading the script in the footer fixed the issue. With the script functioning correctly in legacy and not with async deployment, I didn't think to put the script code in the footer.
Thank You so much for your help.