CODEWITHSUNDEEP
javascripthtmlformsinput
jannyr08
jannyr08

Reputation: 13

Input not being read by code in JavaScript

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)); 
 }

Upvotes: 0

Views: 53

Answers (1)

mplungjan
mplungjan

Reputation: 177746

  1. You need to have the vars inside the functions that need them or they will not pick up what the user enters
  2. You can show and hide the confirm button
  3. 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>

Upvotes: 2

Related Questions