document.getElementById is NULL error - php

Question

I have a function that listens for onkeyup event, that onkeyup checks to see if a box has a value and if not blank is supposed pull the value of an elementID which is a phone number called from another page. It takes that value and inserts it in to a snippet of html that gets sent to another elementID. the folowing code is the function and the associated code.
<script language="javascript">
function monthlycheck() {
var mnthchk = document.getElementById("mdamountBox");
var cancelPhone = document.getElementById("cancelphoneLabel");
document.getElementById("cancelphonelistLabel").value = cancelPhone; <--gives the is null error
if(mnthchk.value!=""){
var newHTML = "<span style='color:#24D330'> Your Monthly pledge in the amount of $__ is valid and will be deducted this time every month<br> untill you notify us of its cancellation by calling <label id='cancelphonelistLabel'> </label>";
" </span>";
document.getElementById("mnthlychkdiscoLabel").innerHTML = newHTML;
}
}
</script>
<label id="mnthlychkdiscoLabel"> </label> <---this is where the final data is to be displayed
<label id="cancelphoneLabel">1-800-555-1111</label> <--- this is the phone number pulled from another page,
all the data is pulled together in a single page when loaded but is written in separate page using smarty templates. I keep getting the entitled error and have tried a number of different things to fix it but im stumped any help is greatly appreciated.
here is a jfiddle http://jsfiddle.net/rn5HH/

Answer 1

I think you are trying to access that id before it's created.
Also .value is only for inputs. It looks like you are creating a label, so you'd use innerHTML instead.
Something like this:
<script language="javascript">
function monthlycheck() {
var mnthchk = document.getElementById("mdamountBox");
var cancelPhone = document.getElementById("cancelphoneLabel");
if(mnthchk.value!=""){
var newHTML = "<span style='color:#24D330'> Your Monthly pledge in the amount of $__ is valid and will be deducted this time every month<br> untill you notify us of its cancellation by calling <label id='cancelphonelistLabel'> </label></span>";
document.getElementById("mnthlychkdiscoLabel").innerHTML = newHTML;
document.getElementById("cancelphonelistLabel").innerHTML = cancelPhone; //<--gives the is null error
}
}
</script>
<label id="mnthlychkdiscoLabel"> </label> <---this is where the final data is to be displayed
<label id="cancelphoneLabel">1-800-555-1111</label> <--- this is the phone number pulled from another page,
I'm not 100% what you are trying to do, so i just tried to make it work. There are many things you could probably simplify in this. It would help if you could create a jsfiddle to show it more clearly.
Edit:
Fixed the fiddle so it works and shows the phone number:
updated fiddle
Is that what it's supposed to do?