colleen colleen - 4 months ago 5
Javascript Question

How to make more than 2 value show in 2 textboxes using the value property

I am having trouble displaying the answers in two different disabled input textboxes. I'm not sure if it is my if statement or if it is my calling of the function. I called it in the else statement for it to show in the disabled input.



<head>
<script>
"use strict";
var $ = function(id) {
return document.getElementById(id);
};


//make change
var makeChange = function(quarters, dimes) {
var quarter_value = 25;
var dime_value = 10;

var cents = parseInt($("cents").value);
if (quarter_value <= cents){
var quarters = parseInt(cents / quarter_value);
var changeValue = parseInt(quarters - cents);
return quarters;
}
if (dime_value <= changeValue) {
var dimes = parseInt(changeValue / dime_value);
return dimes;
}
};

//validate entry 0-99
var processEntries = function() {

var cents = parseInt($("cents").value);

if ( isNaN(cents) || cents < 0 || cents > 99) {
alert("Must be a number 0 - 99");
}
else {
$("quarters").value = makeChange(quarters, dimes);
$("dimes").value = makeChange(quarters, dimes);
}
};

window.onload = function() {
$("calculate").onclick = processEntries;
};
</script>
</head>

<body>
<main>
<h1>Change Calculator</h1>

<label>Enter amount of change due (0-99):</label>
<input type="text" id="cents" />

<input type="button" value="Calculate" name="calculate" id="calculate" /><br><br>

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

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

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

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

</main>
</body>
</html>




Answer

I have annotated your code as best as I could by noting where things might be redefined. The biggest issue is in makeChange(). If you had a way to update the running total via the input "cents" then much of your code would have worked. Basically, the variable changeValue could have been used to update the input and then dimes would work like quarters. I am not keen on that approach and I hope my annotations point you in a better direction

// ---------------------------
// $() shall be sugar for document.getElementById()
// Note: could be a little confusing as some might expect $() to
// be a jQuery result.
// ---------------------------
var $ = function(id) { return document.getElementById(id); };
// ---------------------------

// ---------------------------
// Validate entry 0-99
// ---------------------------
var processEntries = function() {
  var cents = parseInt( $("cents").value );
  
  // ---------------------------
  // Let's set some denominations so it is harder to mess things up.
  // You did somehting similar in makeChange()
  // ---------------------------
  var denom = {
    quarter : 25,
    dime: 10,
    nickel : 5,
    penny : 1
  };
  // ---------------------------
  
  
    if ( isNaN(cents) || cents < 0 || cents > 99){
      alert("Must be a number 0 - 99");

      // ---------------------------
      // At this point we can abort.
      // Rather than an "if else" you might just have this "if" ending
      // in a "return"
      // ---------------------------
    }   
    else {
      // ---------------------------
      // Our amount is good, so lets calculate the change.
      // ---------------------------

      // ---------------------------
      // We want to update the input "quarters" with the number of quarters
      // in the change by calling the makeChange() function.
      //
      // Note, the variable quarters and $("quarters") are actually the same
      // thing. This may or may not be what you are expecting.
      //
      // The variable quarters is being created automatically by the browser
      // because there is an element with that id.  You should probably not
      // rely on this fact. If you intended to pass in the element quarters
      // into your makeChange() then you probably want to do so more explicitely
      // as $("quarters") or define a new variable
      //
      // var quarters = $("quarters");
      //
      // At this point it might be valuable to think about what makeChange()
      // is/should be doing.  It looks like you don't want makeChange() to both
      // calculate the change AND update your GUI. I think that is a good
      // separation.  If that is the case, then what makeChange() really needs to
      // know is what the outstanding amount is.
      //
      // The next question might be is makeChange() called once like
      // makeChange(98) and returns an object or array of the number of each coins
      // or is makeChange() called once for each type of coin returning just the
      // number of that coin.  It looks like you are after the latter and that is
      // fine though it also means we need to track the total in the main code.
      //
      // So, if the above is correct, then we probably want makeChange() to have
      // a slightly different signature.  I'll call a new function makeChange2()
      // with this proposal. makeChange2(outstandingBallance, coinDenomination)
      // and we will expect it to return an integer.
      // ---------------------------

      // ---------------------------
      // $("quarters").value = makeChange(quarters, dimes);
      var quartersReturned = makeChange2(cents, denom.quarter);
      cents = cents - quartersReturned * denom.quarter;
      $("quarters").value = quartersReturned;
      // ---------------------------

      // ---------------------------
      // $("dimes").value = makeChange(quarters, dimes);
      var dimesReturned = makeChange2(cents, denom.dime);
      cents = cents - dimesReturned * denom.dime;
      $("dimes").value = dimesReturned;
      // ---------------------------

      // ---------------------------
      var nickelsReturned = makeChange2(cents, denom.nickel);
      cents = cents - nickelsReturned * denom.nickel;
      $("nickels").value = nickelsReturned;
      // ---------------------------

      // ---------------------------
      var penniesReturned = makeChange2(cents, denom.penny);
      cents = cents - penniesReturned * denom.penny;
      $("pennies").value = penniesReturned;
      // ---------------------------
      
      // ---------------------------
    }
};
// ---------------------------

// ---------------------------
// makeChange2()
// Given a total and a denomination return the maximum number of coins.
// ---------------------------
function makeChange2(outstandingBallance, coinDenomination) {
  return Math.floor(outstandingBallance / coinDenomination);
}
// ---------------------------

// ---------------------------
// makeChange()
// No longer called, but let's take a look at it.
// We pass in some GUI elements and return something... looks like an integer
// ---------------------------
var makeChange = function(quarters, dimes){
  // ---------------------------
  // Set some standard denominations.  Looks good.  We now do something similar
  // outside this function.
  // ---------------------------
  var quarter_value = 25;
  var dime_value = 10;
  // ---------------------------

  // ---------------------------
  // Get the outstanding amount.  Looks good, again we get this outside this scope now 
  // ---------------------------
  var cents = parseInt($("cents").value);
  // ---------------------------

  // ---------------------------
  // If the outstanding acount is more than a quarter, then return some number of quarters
  // ---------------------------
  if (quarter_value <= cents){
    // ---------------------------
    // Careful here, you just changed what quarters means.
    // You might also want to use Math.floor() to be more explicite.
    // ---------------------------
    var quarters = parseInt(cents / quarter_value);
    // ---------------------------

    // ---------------------------
    // It looks like you want to potentiall calculate the value of the change
    // about to be given, but remember quarters in now the number of quarters
    // to potentially give so (quarters - cents) is probably not what you wanted here.
    // maybe more like:
    //
    // var changeValue = quarters * quarter_value;
    // or
    // var changeValue = cents - quarters * quarter_value;
    //
    // having done that though, you would still likely want to do "something" with changeValue
    // ---------------------------
    var changeValue = parseInt(quarters - cents);
    // ---------------------------

    // ---------------------------
    // return the number of quarters to be given
    // ---------------------------
    return quarters;
    // ---------------------------
  }
  // ---------------------------

  // ---------------------------
  // You might have wanted to do something similar to what you did with quarters here.
  // See notes above.
  //
  // BUT, changeValue likely never gets set correctly.
  // it exists (thanks to hoisting) but is undefined if there are no quarters.
  // If there are quarters then we already exitted above.
  //
  // Assuming you wanted to call this function multiple times, changeValue would have had to
  // update $("cents").value with the running total and that is probably not a great idea.
  // If you did, then the variable cents could have been used here rather than changeValue.
  // ---------------------------
  if (dime_value <= changeValue){
    var dimes = parseInt(changeValue / dime_value);
    return dimes;
  }
  // ---------------------------

};
// ---------------------------

window.onload = function() { $("calculate").onclick = processEntries; };
<h1>Change Calculator</h1>

<label>Enter amount of change due (0-99):</label>
<input type="text" id="cents" />

<input type="button" value="Calculate" name="calculate" id="calculate" /><br><br>

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

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

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

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

Comments