Why does calling getElementById() return null?

[jaraujo]

So I've been working on this UI Page that triggers off a button and is supposed to display a list of commands to be used in order based off the current record's information.  That part works and the commands are displayed.  However, one of the commands aren't displaying and after some research and testing, I still can't seem to figure out why.  At the top of the HTML portion of the UI Page, I have all the variables I need such as:

<g:evaluate var="jvar_u_ike_version" expression="RP.getWindowProperties().get('u_ike_version')"/>

Then much later on in the HTML portion of the UI Page, within a <script> block, I have this statement in JavaScript:

var ikeVersion = document.getElementById("jvar_u_ike_version");

Now, my question is why does this return null regardless of which variable ID I use even though in another <script> block before this one, I have a statement just like this one that returns the proper value and works fine?  Both <script> blocks are placed after all of the variable statements (like the one above) yet null still comes up.

[SanjivMeher]

Try var ikeVersion = jelly.jvar_u_ike_version;

[jaraujo]

Unfortunately, that doesn't seem to work for me.  I've been checking the browser's console logs and during execution, it says:

"Uncaught ReferenceError: jelly is not defined"

Not quite sure why this is occuring though.

[SanjivMeher]

Can you try

var ikeVersion = ${jvar_u_ike_version}

Or 

var ikeVersion = "${jvar_u_ike_version}"

[jaraujo]

Thanks for the followup!  I was able to solve the issue.  I used "g_form" to call the value I wanted and it all works out well now.