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. — C3roe
– C3roe, Commented Jul 30, 2020 at 8:49

mplungjan · Accepted Answer · 2020-07-30 09:18:11Z

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, 2020 at 9:18

answered Jul 30, 2020 at 9:03

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jannyr08 Over a year ago

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.

mplungjan Over a year ago

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 Over a year ago

You mean this? stackoverflow.com/questions/5529934/javascript-numbers-to-words

jannyr08 Over a year ago

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.

mplungjan Over a year ago

But that was not part of your question so we just need to change (cash - itemCost).toFixed(2) to whatever you need

|

Collectives™ on Stack Overflow

Input not being read by code in JavaScript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related