Member Avatar for dlmagers

Hello, I am working on this javascript application to be able to make change. I have my html and css files down good. Here is what I have.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Make Change</title>
    <link rel="stylesheet" href="styles.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="make_change.js"></script>
</head>

<body>
<section>
    <h1>Change Calculator</h1>

    <label>Enter amount of change due (0-99):</label>
    <input type="text" id="cents" />
    <input type="button" value="Make Change" name="calculate" id="calculate" /><br><br>

    <label>Quarters:</label>
    <input type="text" id="quarters"><br>

    <label>Dimes:</label>
    <input type="text" id="dimes"><br>

    <label>Nickels:</label>
    <input type="text" id="nickels"><br>

    <label>Pennies:</label>
    <input type="text" id="pennies"><br>

</section>
</body>
</html>

css

/* type selectors */
article, aside, figure, footer, header, nav, section {
    display: block;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 650px;
    border: 3px solid blue;
}
h1 {
    color: blue;
    margin-top: 0;
}
section {
    padding: 1em 2em;
}
label {
    float: left;
    width: 16em;
    text-align: right;
}
input {
    margin-left: 1em;
    margin-bottom: .5em;
}

Now, here is my change_maker.js file

var $ = function (id) {
    return document.getElementById(id);
}

var calculate_click = function ()
{ 
    var cents = $("cents").value;

    if ($("cents").value > 24){
        var quarters = Math.floor(cents/0.25);
        cents = cents%0.25;
        $("quarters").value = quarters }

    if ($("cents").value > 9){
        var dimes = Math.floor(cents/0.1);
        cents = cents%0.1;
        $("dimes").value = dimes}

    if ($("cents").value > 4){
        var nickels = Math.floor(cents/0.1);
        cents = cents%0.1;
        $("nickels").value = nickels}

    if ($("cents").value > 0) {
        var pennies = Math.floor(cents);

        $("pennies").value = pennies}

} 
window.onload = function () {
    $("calculate").onclick = calculate_click;
}

PROBLEM: I feel confident that I have a good understanding of my code but for some reason it is only calculating the quarters. Sigh! I have worked on this code for about 5 hours now and because I am new to JavaScript applications I can't for the life of me figure out why it is not working.

This is the path http://dianamagers.com/folio/change_maker/index.html

Please someone HELP me out with this. Thank you in advance.

  • 2 Contributors
  • 2 Replies
  • 6K Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by dlmagers
Member Avatar for cereal

Hello,

I think the problem is in the cents variable, this is modified after each IF statement, but doing:

cents = cents%0.25;

Will return 0.065 which means 0, so the other statements will return empty. Try:

var calculate_click = function ()
{ 
    var cents = $("cents").value;

    if (cents > 24){
        var quarters = Math.floor(cents/0.25);
        $("quarters").value = quarters
    }

    if (cents > 9){
        var dimes = Math.floor(cents/0.1);
        $("dimes").value = dimes
    }

    if (cents > 4){
        var nickels = Math.floor(cents/0.05);
        $("nickels").value = nickels
    }

    if (cents > 0) {
        var pennies = Math.floor(cents/0.01);
        $("pennies").value = pennies
    }
}

Hope it's helpful, bye!

Member Avatar for dlmagers

Dang it. I got it. Your code was helpful but I did make one change to it.

 var calculate_click = function ()
    {
    var cents = $("cents").value;
    if (cents > 24){
    var quarters = Math.floor(cents/25); //Changed from 0.25 to 25
    $("quarters").value = quarters
    }
    if (cents > 9){
    var dimes = Math.floor(cents/10); //changed this to 10
    $("dimes").value = dimes
    }
    if (cents > 4){
    var nickels = Math.floor(cents/05); // changed this one to the correct 05
    $("nickels").value = nickels
    }
    if (cents > 0) {
    var pennies = Math.floor(cents/01);
    $("pennies").value = pennies
    }
    }

So but anyway. Thank you for the nudge. I appreciate it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.