Build A Cash Register Project - Test 4 failing

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Build A Cash Register</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
<body>
<input type="number" id="cash" value="" />
<div id="change-due"></div>
<button id="purchase-btn">Purchase</button> 
<script src="./script.js"></script>
</body>
</html>
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 = Number(cash.value);

if (cashValue < price) {
  alert("Customer does not have enough money to purchase the item");
}


When I run the tests, I get the alert box for “Customer does not have enough money to purchase the item” but the test " When the value in the #cash element is less than price , an alert should appear with the text "Customer does not have enough money to purchase the item" ." fails, and in the console I see “[TypeError: Cannot read properties of undefined (reading ‘trim’)]” although I guess that might relate to some component needed for later tests which I haven’t built yet.

you need to use an event listener that execute your code when the button is clicked, at this time you don’t have any event listeners in place

Thank you, I have got through tests 4 and 5 now.