javascript - 为什么我的 InnerHTML 代码不会在表单字段中显示任何数据？

Question

我做了一个简单的找零计算器。在使用代码后，我设法让它计算我需要的值，但我无法让它填充我的表单。如果我使用 alert，该功能是正确的，但如果我尝试使用 innerHTML 填充字段，则不会发生任何情况。我真的被这个问题困住了。 :(

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>

Answer 1

设置 <input> 的 .innerHTML 属性类型不会做任何事情。相反，设置这些元素的 .value 属性。

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