Build cash register project

why am I getting this error “Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))” in my console?

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</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="container">
    <h1>
      Cash Register Project
    </h1>
    <div id="change-due"></div>
    <label for="cash" class="cashbook">Enter cash from customer: </label>
    <input id="cash" class="register" type="number">
    <button id ="purchase-btn">Purchase</button>
<div id="get-total"></div>
<div class="design"></div>
<div class="cid-container">
  <div id="cid-content"></div>
</div>

  <script src="script.js"></script>
</body>
</html>

javascript

`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 changeDue = document.getElementById("change-due");
const cashInput = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const getTotal = document.getElementById("get-total");
const cidContent = document.getElementById("cid-content");


  getTotal.innerHTML = `
<p class="total">Total: $${price}</p>
`;
cidContent.innerHTML = `
<h2>Change in drawer:</h2>
<p class="pcid">PENNIES: $${cid[0][0,1]}</p>
<p class="pcid">NICKELS: $${cid[1][0,1]}</p>
<p class="pcid">DIMES: $${cid[2][0,1]}</p>
<p class="pcid">QUARTER: $${cid[3][0,1]}</p>
<p class="pcid">ONES: $${cid[4][0,1]}</p>
<p class="pcid">FIVES: $${cid[5][0,1]}</p>
<p class="pcid">TENS: $${cid[6][0,1]}</p>
<p class="pcid">TWENTIES: $${cid[7][0,1]}</p>
<p class="pcid">HUNDREDS: $${cid[8][0,1]}</p>
`;

const verifyChange = () => {
  if (parseFloat(cashInput.value) < price) {
    alert("Customer does not have enough money to purchase the item");
    
  } else if (parseFloat(cashInput.value) === price) {
  changeDue.textContent = "No change due - customer paid with exact cash";
  changeDue.style.display = "block";
  return cashInput.value = "";
  }
  
}
const checkCashRegister = (price, cash, cid) => {
  const unitAmount = {
    "PENNY": 0.01,
    "NICKEL": 0.05,
    "DIME": 0.10,
    "QUARTER": 0.25,
    "ONE": 1.00,
    "FIVE": 5.00,
    "TEN": 10.00,
    "TWENTY": 20.00,
    "ONE HUNDRED": 100.00
  }
  let totalCID = 0;
  for (let element of cid) {
    totalCID += element[1];
  }
  totalCID = totalCID.toFixed(2);
  let changeToGive = cash - price;
  const changeArray = [];
  if (changeToGive > totalCID) {
    return { status: "INSUFFICIENT_FUNDS", change: changeArray };
  } else if (changeToGive.toFixed(2) === totalCID) {
    return { status: "CLOSED", change: cid };
  } else {
    cid = cid.reverse();
    for (let elem of cid) {
      let temp = [elem[0], 0];
      while (changeToGive >= unitAmount[elem[0]] && elem[1] > 0) {
        temp[1] += unitAmount[elem[0]];
        elem[1] -= unitAmount[elem[0]];
        changeToGive -= unitAmount[elem[0]];
        changeToGive = changeToGive.toFixed(2);
      }
      if (temp[1] > 0) {
        changeArray.push(temp);
      }
    }
  }
  if (changeToGive > 0) {
    return { status: "INSUFFICIENT_FUNDS", change: [] };
  }
  return { status: "OPEN", change: changeArray};
}

purchaseBtn.addEventListener("click", () =>{
  verifyChange();
 checkCashRegister();
 
});

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Try to pin-point where the error comes from exactly. Adding some console.log print outs could help with that.

you are calling a function that has placeholders with no values to insert into each placeholder when the function is called. also cash is not a defined variable. so when you click purchase you should let cash to equal something ;).

this will allow your code to not break but it doesnt exactly do much of anything there seems to be no update to html when the code is run with an input after the fix. i havent gone through everything but the code no longer breaks

edit. found the issue. you say return {status: case change: case}

this lets your call checkCashRegister() = {status: case change: case}

from that point the code has no idea what is going on.
it would be better to update the textContent of change-due to an interpolated string with the status and change AND THEN return.
in this way the code will actually do something rather than being like. ya cool. im an object XD
edit.
found another issue t.t
when working with money try convert it to whole intergers rather than working with floats and then using the float function to remove the extras that appear.
so before you work your code iterate through the cid, convert all the items to cents and then convert it back when you are finished using the cid