Build a Telephone Number Validator Project - Build a Telephone Number Validator

Tell us what’s happening:

I am not sure why this is marked as incomplete, because when I click, my text.content it is deleted

When you click on the #clear-btn element, the content within the #results-div element should be removed.

CODE

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Telefon Number Validator</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <div id="main-div">
    <input id="user-input"></input>
    <button id="check-btn">CHECK</button>
    <button id="clear-btn">CLEAR</button>
  </div>
  <div id="results-div">
  </div>
  <script src="./script.js"></script>
</body>
</html>

/* file: styles.css */

/* file: script.js */
const clearBtn = document.getElementById('clear-btn');
const resultDiv = document.getElementById('results-div');

clearBtn.addEventListener("click",  () => {
  console.log("not click");
  if(userInput.value === "") {
    alert("Already cleared")
    return
  } else {
    userInput.value = "";
    resultDiv.textContent = "";
  }
});




Challenge Information:

Build a Telephone Number Validator Project - Build a Telephone Number Validator

look at the console, scroll down in the editor console after the tests output or look at the browser console. You have an error:

[TypeError: Cannot read properties of undefined (reading ‘trim’)]
not click
Uncaught ReferenceError: userInput is not defined