Javascript function not returning a value

Question

I have a javascript function that check for a value from a text box and the if the text box is not blank it outputs a statement. The text box take a numeric value, i want to include that numeric value that is output to html.

here is the html

   <br><label id="cancelphoneLabel">1-800-555-1111</label>
   <br><label id="mdamountLabel">Monthly Donation:
<td>
    <input type="text" id="mdamountBox" style="width:50px;" name="md_amt" value="" placeholder="Monthly" onkeyup="monthlycheck()" autocomplete="off">

   <br><label id="mnthlychkdiscoLabel">&nbsp;</label>

and the Javascript

 function monthlycheck() {

var mnthchk = document.getElementById("mdamountBox").innerHTML; <---i want to pass the value of this box
var cancelPhone = document.getElementById("cancelphoneLabel").innerHTML;



if (mnthchk.value != "") {

    var newHTML = "<span style='color:#24D330'> Your Monthly pledge in the amount of $<label id='dollarLabel'>&nbsp;</label> is valid and will be deducted this time every month<br> untill you notify us of its cancellation by calling <label id='cancelphonelistLabel'>&nbsp;</label> </span>";

    document.getElementById("mnthlychkdiscoLabel").innerHTML = newHTML;
    document.getElementById("cancelphonelistLabel").innerHTML = cancelPhone;
    document.getElementById("dollarLabel").innerHTML = mnthchk;   <----passed to here

i cant get the value passed, it only shows blank, i can hardcode a value and will output fine, which is how the jsfiddle is currently http://jsfiddle.net/rn5HH/4/

thanks in advance

Answer 1

Input elements don't have child nodes, therefore innerHTML is blank. If you want to read their value, use the value property.

Answer 2

Your line:

var mnthchk = document.getElementById("mdamountBox").innerHTML;

Should be:

var mnthchk = document.getElementById("mdamountBox");

Then you can get the value of the text input like this:

var newmnthchk = mnthchk.value;

Working JS Fiddle here: http://jsfiddle.net/rn5HH/10/

Answer 3

使用document.getElementById("mdamountBox").value

Answer 4

The problem here is you are trying to get the innerHtml, where you want the value. From your fiddle, just change this line:

var mnthchk = document.getElementById("mdamountBox").innerHTML;

...to this:

var mnthchk = document.getElementById("mdamountBox").value;

Answer 5

check below code :

HTML Code

<br><label id="cancelphoneLabel">1-800-555-1111</label>
<br><label id="mdamountLabel">Monthly Donation:
<td>
    <input type="text" id="mdamountBox" style="width:50px;" name="md_amt" value="" placeholder="Monthly" onkeyup="monthlycheck()" autocomplete="off">

<br><label id="mnthlychkdiscoLabel">&nbsp;</label>

Javascript Code

function monthlycheck() {

var mnthchk = document.getElementById("mdamountBox").value;
var cancelPhone = document.getElementById("cancelphoneLabel").innerHTML;



if (mnthchk.value != "") {

    var newmnthchk = '5';
    newmnthchk = mnthchk;
    var newHTML = "<span style='color:#24D330'> Your Monthly pledge in the amount of $<label id='dollarLabel'>&nbsp;</label> is valid and will be deducted this time every month<br> untill you notify us of its cancellation by calling <label id='cancelphonelistLabel'>&nbsp;</label> </span>";

    document.getElementById("mnthlychkdiscoLabel").innerHTML = newHTML;
    document.getElementById("cancelphonelistLabel").innerHTML = cancelPhone;
    document.getElementById("dollarLabel").innerHTML = newmnthchk;

}
}

This is working code perfectly checked on Fiddle ,you need to get DOM value using

var mnthchk = document.getElementById("mdamountBox").value;