Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

User stories (4,5) part of my code works when I test it in the console, but when I click run the tests none of them pass. Please look at my code and tell me what I am doing wrong. Thank You!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="style.css">
	<script src="script.js">
	//
	</script>
</head>
<body
	<div id="flex">
		<div id="div1">
	<h1>Cash Register</h1>
	<form action="" method="" >
	<p><label for = "price" class="amt">Enter price: </label>
	<input type="number" min="0" max="100" placeholder="price?" id="price" name="price"/></p>
	<label for="cash" class="amt">Enter cash: </label>
	<input type="number" placeholder="cash" id="cash"  name="cash" />
	<!--<input type="submit" value="Submit" >-->
	<p><button id="purchase-btn">purchase</button></p>
	<div id="change-due"></div>
	</div>	
	</form>
	<script>
		const element = document.getElementById("purchase-btn");
		element.addEventListener("click", checkCashRegister);	
	</script>
	</div>
</body>
</html>
/* file: styles.css */

/* file: script.js */
function checkCashRegister() {
	let price = 1;
let cid = [["PENNY", 0.0], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 20], ["ONE HUNDRED", 0]];
	
	let cash = parseFloat(document.getElementById("cash").value);
	//let price = 1; 
	document.getElementById("price").innerHTML=parseFloat(price);
	let changeArr=[];
	let denom = [["PENNY", .01], ["NICKEL", .05], ["DIME", .1], ["QUARTER", .25], ["ONE", 1], ["FIVE", 5], ["TEN", 10], ["TWENTY", 20], ["ONE HUNDRED", 100]];
  	
	let total =cid.reduce((total, value) => total + value[1],0).toFixed(2);	
			
	let change = cash - price;
	
	let register = [
	{
		status: "INSUFFICIENT_FUNDS" 
	},
	{
		status: "CLOSED <br>" ,
		change: cid
	},
	{
		status: "OPEN",
		change: changeArr		
	},
	{
		status: "No change due - customer paid with exact cash."
	},
	{
		status: "Customer does not have enough money to purchase the item."
	}];
	
	if(cash < price){
		 alert (register[4].status);
		 return;
	} else if(cash==price){
		return document.getElementById("change-due").innerHTML= register[3].status;
	}
    
	if(total < change){
			return document.getElementById("change-due").innerHTML= "Status: "+ register[0].status ;
	} else if(total==change){
		return document.getElementById("change-due").innerHTML= "Status: "+ register[1].status + register[1].change; //register[1]);
	} 
}

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

1 Like

Welcome back to the forum @AEA2002

Place the script element above the body closing tag.
Otherwise the script may load before the html elements are loaded onto the page.

Then place all the JavaScript in the script.js file.

Happy coding

1 Like

Could you share your updated code?

Edit: You need to have cid and price variables present in the global scope.

Thank you for replying. Here’s my code. I put the script tags with script.js above the closing body tag in .html file.

const element = document.getElementById("purchase-btn");
element.addEventListener("click", checkCashRegister);

function checkCashRegister() {
	
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]
];

	let cash = parseFloat(document.getElementById("cash").value);
	let changeArr=[];
	let denom = [["PENNY", .01], ["NICKEL", .05], ["DIME", .1], ["QUARTER", .25], ["ONE", 1], ["FIVE", 5], ["TEN", 10], ["TWENTY", 20], ["ONE HUNDRED", 100]];
  	let total =cid.reduce((total, value) => total + value[1],0).toFixed(2);	
	let change = cash - price;
	
	const register = [
	{
		status: "INSUFFICIENT_FUNDS" 
	},
	{
		status: "CLOSED",
		change: cid
	},
	{
		status: "OPEN",
		change: "changeArr"		
	},
	{
		status: "No change due - customer paid with exact cash."
	},
	{
		status: "Customer does not have enough money to purchase the item."
	}];
	
	if(cash < price){
		return alert (register[4].status);
	} else if(cash==price){
		return document.getElementById("change-due").innerHTML= register[3].status;
	}
    
	if(total < change){
		return document.getElementById("change-due").innerHTML= "Status: "+ register[0].status;
	} else if(total==change){
		return document.getElementById("change-due").innerHTML= "Status: "+ register[1].status + "<br>" + register[1].change; 
	} 

}

I figured it out. Price and cid variables should be outside my function.
Thanks, again for replying to my question and for the help.

Thank you for your quick reply. I moved the script tags above the closing body tag as you suggested and moved the JavaScript to the script.js file, but it still doesn’t work.

1 Like

I did not see your edit before I figured it out, but you had the correct solution. :grinning: