Leftover change amount using modulus operator (JavaScript)

I am working on an assignment that requires me to convert any number of pennies into the appropriate amount of Quarters, Dimes, Nickels and remaining pennies.

When I run the program, it is converting the total amount to each respective coin using Math.floor(). This script is running in the head, as is required per the assignment:

<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="utf-8" />
<title>Make Change</title>
<meta name="generator" content="Geany 1.29" />

<script>
function convertChange(numberOfQuarters, numberOfDimes, numberOfNickels, numberOfPennies) {

number=parseFloat(document.getElementById("penniesBox").value);
numberOfQuarters = Math.floor(number/25);
numberOfDimes = Math.floor(number/10);
numberOfNickels = Math.floor(number/5);
numberOfPennies = Math.floor(number/1);
    document.getElementById("outputDiv").innerHTML=
        'Quarters: ' + numberOfQuarters + "<br>" + 
        'Dimes: ' + numberOfDimes + "<br>" + 
        'Nickels: ' + numberOfNickels + "<br>" + 
        'Pennies:' + numberOfPennies;

}

</script>
</head>

<body>
<h2>Make Change</h2>
<p>This page will tell you the minimum amount of pennies, nickels, dimes and quarters you need to match the number of pennies entered.</p>
<p>Enter a number of pennies:
<input type="text" id="penniesBox" size=12 value="">
</p>
    <input type="button" value="Show me the money!"
    onclick="convertChange();">


<hr>
<div id="outputDiv"></div>




</body>

</html>

How would I go about using the modulus operator in order to get the remaining amount of pennies to display next to the appropriate amount of change?

Solution

Use modulus to get the leftover amount that you'll use in later calculations (Math.floor...), overwriting each money with the leftover amount. Also, since you're not passing in the variables to your function in your onclick (notice it's only convertChange()), you should declare your variables within the function using var ....

See updated code here:

function convertChange() {
    var money = parseFloat(document.getElementById("penniesBox").value); 
    var numberOfQuarters = Math.floor(money/25);
    money = money%25;
    var numberOfDimes = Math.floor(money/10);
    money = money%25;
    var numberOfNickels = Math.floor(money/5);
    money = money%5;
    var numberOfPennies = money;
        document.getElementById("outputDiv").innerHTML=
            'Quarters: ' + numberOfQuarters + "<br>" + 
            'Dimes: ' + numberOfDimes + "<br>" + 
            'Nickels: ' + numberOfNickels + "<br>" + 
            'Pennies:' + numberOfPennies;
}

<h2>Make Change</h2>
<p>This page will tell you the minimum amount of pennies, nickels, dimes and quarters you need to match the number of pennies entered.</p>
<p>Enter a number of pennies:
<input type="text" id="penniesBox" size=12 value="">
</p>
    <input type="button" value="Show me the money!"
    onclick="convertChange();">


<hr>
<div id="outputDiv"></div>