Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

Does any body know why my tests dont pass when I try it in the browser everything works ?? Im getting the error:[TypeError: Cannot read properties of null (reading ‘click’)]?

Your code so far

<!-- file: index.html -->
<input id = "cash">
<div id = "change-due"><div/>
<button id = "purchase-btn">purchase<button/>
<script src = "script.js"></script>
/* file: styles.css */

/* file: script.js */
let price = 19.5;
let cid = [
  ["PENNY", 0.5],
  ["NICKEL", 0],
  ["DIME", 0],
  ["QUARTER", 0],
  ["ONE", 0],
  ["FIVE", 0],
  ["TEN", 0],
  ["TWENTY", 0],
  ["ONE HUNDRED", 0]
];
const MONEY_TABLE = {
  PENNY: 1,
  NICKEL: 5,
  DIME: 10,
  QUARTER: 25,
  ONE: 100,
  FIVE: 500,
  TEN: 1000,
  TWENTY: 2000,
  "ONE HUNDRED": 10000
}
const changeDiv = document.getElementById('change-due');
const purchaseBtn = document.getElementById('purchase-btn');
function checkCashRegister(price, cash, cid) {
  const changeDue = cash - price;
  let changeDueCents = changeDue * 100;
  let changeDetails = '';
  const cashForChange = cid.reduce((acc, moneySlot) => {
    return acc + moneySlot[1] * 100;
  }, 0)
 
  // if money in cid is same as change
  if( changeDueCents === cashForChange){
    return `Status: CLOSED${cid.reverse().filter(([_, value])=> value>0).reduce((stringedArray, billName)=>{ return stringedArray+` ${billName[0]}: $${billName[1]}`},``)}`
  }
  // calculate how much change we can give based on slots in the cid
  
  // reverse the cid, create an array of slots based on adding up for each slot the amount of money well pay with that slot
  const changeInHand = cid.reverse().map(([billOrCoinName, valueInSlot])=>{
  //Instantiate the amount o money that bill has as 0
  let totalCash = 0;
  //get the value of that slots worth
  const denomination = MONEY_TABLE[billOrCoinName];
  //get the slot amount in cents
  let valueInSlotCents = Math.round(valueInSlot * 100.0);
  
  // Loop: While the amount of money in that slot is bigger than 0 and the value of that slot is smaller than the amount of remaining change due
  while(valueInSlotCents > 0 && denomination <= changeDueCents){
    // Add one  bills worth to the total
    totalCash += denomination;

    //subtract that amount from the change due
    changeDueCents -= denomination;
    //subtract that amount from the amount available in that slot
    valueInSlotCents -= denomination;
  }
  return [billOrCoinName, totalCash /100]
  
  }).filter(([_ , value]) => value > 0)// filter out all the coin and bill types that have 0 money
  changeDetails = changeInHand.reduce((stringedArray,changeName)=>{
    return stringedArray + ` ${changeName[0]}: $${changeName[1]}`
  },``)
  //console.log(changeInHand)
  //console.log(changeDetails)

  // if there is still change due, we either don't have enough money in the cid or the money types dont add up
  if( changeDueCents > 0){
    return "Status: INSUFFICIENT_FUNDS";
  }
  //console.log(changeInHand, changeDueCents)
  return `Status: OPEN${changeDetails}`;
}

purchaseBtn.addEventListener('click', ()=>{
  const cashInput = document.getElementById('cash').value;

  if(Number(cashInput) < price){
    alert("Customer does not have enough money to purchase the item")
    return;
  }
  else if(Number(cashInput) === price){
     changeDiv.innerHTML =  "No change due - customer paid with exact cash";
     return;
  }
  changeDiv.innerHTML = checkCashRegister(price, Number(cashInput),cid);

})

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

There are two small errors in the HTML, div and button elements have closing tag written with error.

This makes browser try to fix not closed elements and in such case everything after the #change-due ends up in it contents. When one of the tests that change the #change-due is run, everything in the element gets rewritten, including the button, hence the TypeError due to missing button.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.