Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

My cash variable in javascript shows up as {} on my console.log(cash) call. I have tried calling it inside and outside of my click event but it does not change the outcome. It seems that there is a disconnect between my HTML and javascript, although I am unable to pinpoint where the disconnect is. Any hints would be much appreciated. My code is far from finished, so I’m sorry for the cut off at the else statement.

Your code so far

    <label for="cash">Cash:</label>
      <input id="cash" class="user-input" name="cash-input">
      <button id="purchase-btn" onclick="click" for="cash">Purchase</button>
  <p id="change-due">Change Due:</p>
</main>
<script src="script.js"></script>
``` 
/* 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 cashValue = cash.value;
const changeDue = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");

const giveChange = (ca, pr) => {
  if (!cash) {
    alert("Please enter a value");
  }
  const cashNumber = Number(ca.value);
  const change = pr - cashNumber;
  if (change < 0) {
    return alert("Customer does not have enough money to purchase the item");
  } else if (change === 0) {
    changeDue.textContent = "No change due - customer paid with exact cash";
    return;
  } else {
    
  }
};

purchaseBtn.addEventListener("click", giveChange(cash, price));
console.log(cash);

/* file: styles.css */
main {
  background-color: #d9d9d9;
  border-style: solid;
  border-color: black;
}

h1 {
  text-align: center;
  text-decoration: underline;
}

h2 {
  margin: 10px;
  padding: 20px;
  text-align: left;
}

p {
  text-align: left;
  margin: 10px;
  padding: 20px;
  font-size: 22px;
  font-weight: bold;
}

input {
  width: 120px;
}

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

cash is the element, elements are not shown correctly in the editor console, but if you open the browser console you will see it.

if cash is the element, are you sure here you are checking for the right thing?

3

Hello~ I haven’t reached the assignment yet so take this with a bucket of salt.

When you console.log(cash), it’s only logging the variable cash that references the id “cash” from html. Cash is also just a reference to the element, not the value.

You might find that logging cashValue does nothing. That’s because the text box is empty and console log runs from the start. (There’s nothing in the text box when console log ran.)

Try making a function that gets the value when it is called. (For example, making a variable that references .value again) Console log the update within the function.

button.addEventListener("click", fungi);
const fungi=()=>{
let mushroom=textBox.value
console.log(mushroom)
}
1 Like
4

Thank you for your reply, your example made me learn a few things about finding where things were going wrong. I now see the value pop-up in my console but I had to change something: I used a query selector instead of getElementById. Im not sure why this changes thing but there is a new issue: for some reason, it is not detecting when the input box has no value. I tried .value and without, and the response is the same. However, when I change any of the code and the preview reloads, the alert pops up? Even though its inside a click event. How is the click event being used if I am not using the button? Thank you again for your help and insight.

5

I now see the value pop-up in my console but I had to change something: I used a query selector instead of getElementById. I’m not sure why this changes things but there is a new issue: for some reason, it is not detecting when the input box has no value. I tried .value and without, and the response is the same. However, when I change any of the code and the preview reloads, the alert pops up? Even though its inside a click event. How is the click event being used if I am not using the button? Thank you again for your help and insight.

6

Am unable to visualize what changes had been made, would need an updated code in the response.

7

Of course, here is the updated code:

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 cashInput = document.querySelector("#cash");
const changeDue = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");

const giveChange = () => {
  if (!cashInput.value) {
    alert("Please enter a value");
  }
};

const showInput = () => {
  let ivalue = cashInput;
  console.log(ivalue);
};

purchaseBtn.addEventListener("click", showInput);

purchaseBtn.addEventListener("click", giveChange);

Html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Cash Register</title>
  </head>
  <body>
    <main>
      <h1 id="main-title">Checkout</h1>
        <h2 id="price-title">Price:</h2>
        <label for="cash">Cash:</label>
          <input id="cash" class="user-input" name="cash-input">
          <button id="purchase-btn" onclick="click" for="cash">Purchase</button>
      <p id="change-due">Change Due:</p>
    </main>
    <script src="script.js"></script>
  </body>
</html>
8

it is not detecting when the input box has no value. I tried .value and without, and the response is the same. However, when I change any of the code and the preview reloads, the alert pops up

I’m not seeing the same. When trying the code, the alert only pops up when clicking with an empty text field. Nothing is logged until clicking the button.

It is however, logging an empty array for when there is an input without .value on cashInput.

const showInput = () => {
  let ivalue = cashInput;
  console.log(ivalue);
};
1 Like
9

I updated ivalue = cashInput to be ivalue = cashInput.value and it shows on my end the same as before. Everything seems to be working now, and the box now properly shows the alert after clicking a button instead of upon refreshing the preview. I really appreciate your help, I will let you know if I stumble upon any other issues. Thank you very much!