How to edit Content inside Collapsible Widget?

Question

I am working in Jquery Mobile and have hit my next brick wall, which I am hoping somebody will kindly point out where I am going wrong.

I have a collapsible widget which within I wish to amend the content with different values.

An example of my HTML

<div data-role="collapsible" data-mini="true" id="solar_collapsible">
<h3>Solar Power Information</h3>
<p id="solar_current"></p>
</div>

I am trying to amend id "solar_current" below:

document.getElementById("#solar_current").innerHTML = "Solar Current = 13";

Currently I receive this error in Google Chrome :-

Unable to set property 'innerHTML' of undefined or null reference

I have stripped my code back but after searching all afternoon I can not find any reference or other questions relating directly to this problem.

Has Solar_current not been created yet ? is this the reason for the error ?

Thank you very much.

Answer 1

Seeing as you are using jQuery anyway, why not use it:

$("#solar_current").html("Solar Current = 13");

You can run this in the pagecreate event of the page.

If you want to use plain javascript, just remove the "#" as Steve Hynding suggested.:

document.getElementById("solar_current").innerHTML = "Solar Current = 13";