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

JavaScript
1

Tell us what’s happening:

My code isn’t passing story 5: When you click on the #check-btn element without entering a value into the #user-input element, an alert should appear with the text “Please provide a phone number” .

I had the same issue in another project and can’t figure out why it’s not being accepted, any light?

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">
  <link rel="stylesheet" href="./styles.css" >
 <title></title>
  </head>

<header>Coded by Liz</header>
 <body>
   <h1> Telephone Number Validator</h1>
   <h2> Enter a Phone Number</h2>
   <input id="user-input" type="text"></input>
   <button id="check-btn">Check</button>
   <button id="clear-btn">Clear</button>
   <div id="results-div"></div>
   <script src="script.js"></script>
 </body>
 </html>

/* file: script.js */
const userInput= document.getElementById("user-input");
const checkBtn= document.getElementById("check-input");
const clearBtn= document.getElementById("clear-btn");
const resultsDiv= document.getElementById("results-div");

function checkNumber(){
if(userInput.value === ""){
  return alert("Please provide a phone number");
}
}
checkBtn.addEventListener("click", checkNumber);

clearBtn.addEventListener("click", () => {
  resultsDiv.innerHTML="";
})

Challenge Information:

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

2

Hi @lunaxliz

Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)

This error means that something is not defined.

Check that all references do not have a typo.

Happy coding

1 Like