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