Input not being read by code in JavaScript

Question

I'm having trouble with my JS form. So I'm creating a change calculator which takes in two input values - the price and cash. When I explicity put in the actual values inside JS code (like the ones I commented out after confirmValues()), it works just fine. But when I put it in the actual input box, it doesn't give work anymore. Is there something weird with my HTML or JS? Thanks!

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title> Change calculator</title>
</head>
<body>
  <form>
  How much does the item cost?  <input  type="number" id="price" name ="price"/>
  <br/> <br/>
  How much cash do you have? <input type="number" id="cash" name="cash"/><br/> <br/>
  
  <input type="button" value="Enter" onclick="confirmItems();"/>
  
</form>
<p id="confirmation"></p>
<p id ="change"></p>
</body>

 var itemCost = document.getElementById("price");
 var cash = document.getElementById("cash");
 var confirmation = document.getElementById("confirmation");

function confirmItems() {
     confirmation.innerHTML = "Your total purchase costs $" + itemCost.value + " and you have $" + cash.value + " to pay for it.";
     createConfirmationBtn();
}

function createConfirmationBtn() {
    let confirmationBtn = document.createElement("BUTTON");
    const confirmationBtnText = document.createTextNode("Confirm");
    confirmationBtn.appendChild(confirmationBtnText);
    confirmation.appendChild(confirmationBtn);
    confirmationBtn.onclick = function() {
      confirmValues();
    }
}

let changeEl = document.getElementById("change");

function confirmValues() {
  if (parseFloat(cash.value) < parseFloat(itemCost.value)) {   
    changeEl.innerHTML = "Not enough cash";
  } else if (parseFloat(cash.value) == parseFloat(itemCost.value)) {
    changeEl.innerHTML = "Your change is $0.";
  } else {
    calculateChange();
    
  }
}

// cash.value = 500;
// itemCost.value = 33.44;

let remainder = parseFloat(cash.value) - parseFloat(itemCost.value);
let finalOutput = new Array();

function calculateChange() {
  while (remainder > 0) {
    if (remainder >= 100) {
      findChange(100.00);
    } else if (remainder >= 50.00) {
      findChange(50.00);
    } else if (remainder >= 20.00) {
      findChange(20.00);
    } else if (remainder >= 10.00) {
      findChange(10.00);
    } else if(remainder >= 5.00) {
      findChange(5.00);
    } else if (remainder >= 1.00) {
      findChange(1.00);
    } else if (remainder >= 0.25) {
      findChange(0.25);
    } else if (remainder >= 0.10) {
      findChange(0.10);
    } else if (remainder >= 0.05) {
      findChange(0.05);
    } else {
      findChange(0.01);
    }
  }
   changeEl.innerHTML = finalOutput;
 }


function findChange(value) {
   //Step 1. Get number of dollar for each type of dollar 
    let dValue = parseInt(remainder / value);
   // Step 2. Storing numDValue in an array 
    finalOutput.push("[$" + value + " x" + dValue+"]");
    remainder = parseFloat(remainder - (value * dValue));
    remainder = parseFloat(remainder.toFixed(2)); 
 }

`let remainder = parseFloat(cash.value) - parseFloat(itemCost.value);` executes when the script loads, there _are_ no values yet in those fields at that point. You need to read the data from those fields _after_ the user has put values into them. — CBroe, Jul 30 '20 at 08:49

mplungjan · Accepted Answer · 2020-07-30T09:18:11.747

2

You need to have the vars inside the functions that need them or they will not pick up what the user enters
You can show and hide the confirm button
DRY, Don't Repeat Yourself

function confirmValues() {
  let itemCost = document.getElementById("price").value;
  let cash = document.getElementById("cash").value;

  const confirmation = document.getElementById("confirmation");
  const changeEl = document.getElementById("change");
  const confirm = document.getElementById("confirm");

  cash = isNaN(cash) || cash === "" ? 0 : +cash; // test valid input
  itemCost = isNaN(itemCost) || itemCost === "" ? 0 : +itemCost;
  if (cash < itemCost) {
    changeEl.innerHTML = "Not enough cash";
  } else {
    confirmation.innerHTML = "Your total purchase costs $" + itemCost.toFixed(2) + " and you have $" + cash.toFixed(2) + " to pay for it.";
    changeEl.innerHTML = "Your change is $" + (cash - itemCost).toFixed(2);
    confirm.classList.remove("hide");
  }
}

.hide {
  display: none;
}

<title> Change calculator</title>
<form>
  How much does the item cost? <input type="number" id="price" name="price" />
  <br/> <br/> How much cash do you have? <input type="number" id="cash" name="cash" /><br/> <br/>

  <input type="button" value="Enter" onclick="confirmValues();" />
  <input type="button" id="confirm" class="hide" value="Confirm" onclick="alert('Confirmed!')" />

</form>
<p id="confirmation"></p>
<p id="change"></p>

edited Jul 30 '20 at 09:18

answered Jul 30 '20 at 09:03

mplungjan

169,008
28
173
236

Hi. This wasn't exactly what I was looking for. I wanted the change to be based on the US Dollar bills and coins. But thanks for the tip with DRY and the .hide. I'm still new to all this but I'm trying my best to keep my code as clean as possible. – jannyr08 Jul 30 '20 at 11:03
I do not understand what you mean by `I wanted the change to be based on the US Dollar bills and coins`. What did I you do in your original code that I did not do here? – mplungjan Jul 30 '20 at 11:07
You mean this? https://stackoverflow.com/questions/5529934/javascript-numbers-to-words – mplungjan Jul 30 '20 at 11:17
I meant I wanted it to work like a cashier. Let's say an item costs $22.55 and you have $50. The change would be 27.45, yes. But if you're dealing with paper money and coins, you'll receive it in the form of a 20 dollar bill, a 5 dollar bill, two 1 dollar bills, and three quarters. – jannyr08 Jul 30 '20 at 11:23
But that was not part of your question so we just need to change (cash - itemCost).toFixed(2) to whatever you need – mplungjan Jul 30 '20 at 11:26
Like some found [here](https://www.google.com/search?q=change+in+bills+and+coins+javascript+site:stackoverflow.com) – mplungjan Jul 30 '20 at 11:27
Yeah, sorry. I guess I wasn't very specific with my question. I'll check it out. Thanks! – jannyr08 Jul 30 '20 at 11:35

Input not being read by code in JavaScript

1 Answers1