Build a Cash Register Project - Build a Cash Register - Function invoked without pressing button

JavaScript
1

Tell us what’s happening:

My function is being invoked without pressing the purchase button.
When I press the button afterward with a value, nothing happens.
Editing the code will make the alert pop up again on my browser.
How do I prevent this?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cash Register App</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <header>
    <h1>Cash Register App</h1>
  <header>
  <main>
    <input id="cash"></input>
    <div id="change-due">Change Due</div>
    <button id="purchase-btn">Purchase</button>
  </main>
  <script src="script.js"></script>
</body>

</html>

/* file: styles.css */


/* file: script.js */
const cash = document.getElementById("cash");
const changeDue = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");

let price = 10;
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]
];

function calculateChange(){
  const cashValue = cash.value;
  if(cashValue < price){
    alert("Customer does not have enough money to purchase the item");
  } else if(cashValue===price){

  }
};

purchaseBtn.addEventListener("click", calculateChange())

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

1 Like
2

Don’t invoke the callback. When the event is triggered it will call the callback function.

purchaseBtn.addEventListener("click", calculateChange)
1 Like
3

mackenziewhtn, I’m working on this project so that I can know how to help you with it.
I have done the following:

  • Create a CID object for every unique CID shared in the instructions of this challenge.
  • Concisely name keys in the CID object.
  • In calculateChange() after the “cashValue < price” if condition, write “cashValue === price” else if condition(yours could use space before and after === as a format improvement) with changeDue text updated to ‘No change due - customer paid with exact cash’(as this challenges instructions instruct) with textContent.
  • Remove the parentheses after calculateChange in the purchaseBtn click event listener, as written in lasjorg’s reply.

Learn about textContent and how it compares to innerText and innerHTML at the following link Node: textContent property - Web APIs | MDN ;

Tips:

  • Paper and pencil can speed up problem solving.
  • Two industry standard problem solving methods are an effective pair, namely rubber duck debugging(rubber duck not required, any reasonable object or a picture of our Lord Jesus could work too) and using a search engine(Brave Search, Google Search, Ecosia Search, etc).

Rubber duck debugging can be described as explaining a problem to an inanimate object(writing in a notebook could be effective rubber duck debugging) and this can help a problem solver protect their ideas, strengthen their problem solving ability, increase their confidence as a problem solver, save others’ attention, and problem solve.

Update: I think storing just the first CID written in the User Stories is sufficient to begin the CID.

4

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