I'm fairly new to JS and I cannot figure out why my innerHTML is not displaying any output to my 4 input text fields. The ID values for all of the text fields match to the document.getElementByID values, but they aren't getting displayed.
document.getElementById('calculate').addEventListener('click', calculateCoins)
function calculateCoins (){
//converts cents value from string to Int
var cent = parseInt(document.getElementById('cents').value, 10);
/*
calculates # of quarters, displays # of quarters,
and calculates the remainder money
*/
let quarterAmount = Math.floor(cent / 25);
document.getElementById('quarters').innerHTML = quarterAmount;
let quarterRemainder = cent % 25;
/*
calculates # of dimes, displays # of dimes,
and calculates the remainder money
*/
let dimeAmount = Math.floor(quarterRemainder / 10);
document.getElementById('dimes').innerHTML = dimeAmount;
let dimeRemainder = quarterRemainder % 10;
/*
calculates # of nickels, displays # of nickels,
and calculates the remainder money
*/
let nickelAmount = Math.floor(dimeRemainder / 5);
document.getElementById('nickels').innerHTML = nickelAmount;
let nickelRemainder = dimeRemainder % 5;
/*
calculates # of pennies and displays # of pennies
*/
let pennyAmount = Math.floor(nickelRemainder / 1);
document.getElementById('pennies').innerHTML = pennyAmount;
console.log(quarterAmount);
console.log(quarterRemainder);
console.log(dimeAmount);
console.log(dimeRemainder);
console.log(nickelAmount);
console.log(nickelRemainder);
console.log(pennyAmount);
}
To update the input field use .value not .innerHTML
document.getElementById('pennies').value = pennyAmount;
For forms, you need to use the value property instead of the innerHTML property. This is because innerHTML changes the inside code of the tags, while value changes the value attribute of the input.
An example of this is below.
document.querySelector("#text").value = "I'm text!";<input type="text" name="text" id="text" placeholder="Enter any text here..." />Also, the value property can also be read to see the current text inputted by the user.
Extra: I also just noticed the below line from your code.
let pennyAmount = Math.floor(nickelRemainder / 1);
This code is actually not nessecary, as division by one is basically just the same number, and flooring it will not change the result.
This may be one possible solution to achieve the desired objective:
This uses document.getElementById(k).value = <<calculated value>>; rather than innerHTML.
Code Snippet
const coins = Object.fromEntries('quarters:25, dimes:10, nickels:5, pennies:1'
.split(',')
.map(ob => ob.split(':'))
.map(([k, v]) => ([k.trim(), {divisor: v, val: 0}])));
const getQR = (num, divisor) => ([
Math.floor(num / divisor), num % divisor
]);
const calculateCoins = () => {
const userInput = +document.getElementById('cents').value.toString();
coins.quarters.val = userInput;
Object.entries(coins).
forEach(([k, {divisor, val}], idx, selfArr) => {
const [d, r] = getQR(val, divisor);
document.getElementById(k).value = d;
if (idx + 1 < selfArr.length) selfArr[idx+1][1].val = r;
});
};
document.getElementById('calculate').addEventListener('click', calculateCoins).outer { display: flex; flex-direction: column }
input { width: fit-content; margin: 25px 5px 5px; border: 2px solid black; }
button { width: fit-content; margin: 10px; }<div class="outer">
<input id="cents">Enter num of cents</input>
<input id="quarters" >Num of quarters</input>
<input id="dimes" >Num of dimes</input>
<input id="nickels" >Num of nickels</input>
<input id="pennies" >Num of pennies</input>
<button id="calculate">Get coins</button>
</div>Explanation
coins object generated by using known informationval for next iteration.