Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

I’m really stuck on this project. Firstly, I’m trying to create a change element taking the input value for the cash input element minus the price element. I keep receiving NaN. I’m also receiving a “Cannot read properties of undefined (reading, ‘trim’)” error message, which may or may not be related, but I can’t find anything online which explains why this is occurring.

I’ve added parseInt to the function call and also tried adding it to the amount parameter, but I still get NaN.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Cash Register</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <h1>Cash Register Project</h1>
      <div id="change-due">
      </div>
      <div class="customer-cash-input">
        <label for="cash">Enter cash from customer:</label>
        <input id="cash" type="number"></input>
        <button type="button" id="purchase-btn">Purchase</button>
      </div>
      <div class="total">
        <p>Total: <span class="total-span">$1.87</span>
      </div>
      <div class="cid-container">
        <h3>Change in drawer:</h3>
        <ul>
          <li class="change-unit">Pennies: $<span class="change-amount"></span></li>
          <li class="change-unit">Nickles: $<span class="change-amount"></span></li>
          <li class="change-unit">Dimes: $<span class="change-amount"></span></li>
          <li class="change-unit">Quarters: $<span class="change-amount"></span></li>
          <li class="change-unit">Ones: $<span class="change-amount"></span></li>
          <li class="change-unit">Fives: $<span class="change-amount"></span></li>
          <li class="change-unit">Tens: $<span class="change-amount"></span></li>
          <li class="change-unit">Twenties: $<span class="change-amount"></span></li>
          <li class="change-unit">Hundreds: $<span class="change-amount"></span></li>
        </ul>
      </div>
      <script src="script.js"></script>
    </body>
  </html>

/* file: script.js */
let price = 1.87;
let cid = [
  ['PENNY', 1.01],
  ['NICKEL', 2.05],
  ['DIME', 3.1],
  ['QUARTER', 4.25],
  ['ONE', 90],
  ['FIVE', 55],
  ['TEN', 20],
  ['TWENTY', 60],
  ['ONE HUNDRED', 100]
];
const cash = document.getElementById("cash");
const changeDueContainer = document.getElementById("change-due");
const cidContainer = document.querySelector(".cid-container");
const cidAmount = document.querySelectorAll(".change-unit");
const purchaseBtn = document.getElementById("purchase-btn")

const updateCidAmount = () => {
  for (let i = 0; i < cid.length; i++) {
    cidAmount.item(i).textContent += cid[i][1]; 
  }
}

const changeUnitConversion = (amount) => {
  const change = amount - price;
  console.log(change);
}



window.onload = () => {
  updateCidAmount();
}

purchaseBtn.addEventListener("click", changeUnitConversion(parseInt(cash.value)));

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

It appears that NaN is printed to console even without clicking the button. Any ideas why that might be happening?