CODEWITHSUNDEEP
javascript
missandei
missandei

Reputation: 23

Why my InnerHTML code won't display any data in the form fields?

I made a simple change calculator. After playing with the code, I managed to make it calculate the values I needed but I can't make it populate my form. If I use alert, the function is right but if I try to use innerHTML to fill the fields, nothing happens. I am really stuck on this one. :( 

var quarters;
var dimes;
var nickels;
var pennies;

function Calculate() {
    if (cents >= 25) {
        quarters = Math.floor(cents / 25);
        var qreminder = cents % 25;

        if (qreminder <= 24) {
            dimes = Math.floor(qreminder / 10);
            var dreminder = qreminder % 10;
        }
        if (dreminder < 10) {
            nickels = Math.floor(dreminder / 5);
            var nreminder = dreminder % 5;
        }
        if (nreminder < 5) {
            pennies = nreminder / 1;
        }
        document.getElementById("quarters").innerHTML = quarters;
        document.getElementById("dimes").innerHTML = dimes;
        document.getElementById("nickels").innerHTML = nickels;
        document.getElementById("pennies").innerHTML = pennies;

    }
    if (cents < 25) {
        quarters = Math.floor(cents / 25);
        var qreminder = cents % 25;

        if (qreminder <= 24) {
            dimes = Math.floor(qreminder / 10);
            var dreminder = qreminder % 10;
        }
        if (dreminder < 10) {
            nickels = Math.floor(dreminder / 5);
            var nreminder = dreminder % 5;
        }
        if (nreminder < 5) {
            pennies = nreminder / 1;
        }
        document.getElementById("quarters").innerHTML = quarters;
        document.getElementById("dimes").innerHTML = dimes;
        document.getElementById("nickels").innerHTML = nickels;
        document.getElementById("pennies").innerHTML = pennies;
    }
}
var cents = document.getElementById("cents").value;
document.getElementById("calculate").addEventListener("click", Calculate);
	
<div id="content">
    <h1>Change Calculator</h1>
    <label>Enter number of cents (0-99):</label>
    <input type="text" id="cents" />
    <input type="button" value="Calculate" name="calculate" id="calculate" /><br />
    <p>&nbsp;</p>
		
    <label>Quarters:</label>
    <input type="text" id="quarters" class="disabled" disabled="disabled" /><br />
					
    <label>Dimes:</label>
    <input type="text" id="dimes" class="disabled" disabled="disabled" /><br />
	
    <label>Nickels:</label>
    <input type="text" id="nickels" class="disabled" disabled="disabled" /><br />
		
    <label>Pennies:</label>
    <input type="text" id="pennies" class="disabled" disabled="disabled" /><br />
					
    <p>&nbsp;</p>

Upvotes: 0

Views: 67

Answers (1)

Chris Zacharias
Chris Zacharias

Reputation: 608

Setting the .innerHTML property of <input> types will not do anything. Instead, set the .value property of those elements.

document.getElementById("quarters").value = quarters;
document.getElementById("dimes").value = dimes;
document.getElementById("nickels").value = nickels;
document.getElementById("pennies").value = pennies;

Upvotes: 1

Related Questions