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

JavaScript
1

Tell us what’s happening:

Am currently in test 6 which says
Waiting:6. When you click on the #clear-btn element, the content within the #results-div element should be removed.
Waiting:7. When the #user-input element contains 1 555-555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: 1 555-555-5

I think i have done it right but when i click the check button the entire listener seems to stop working

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">
<title></title>
</head>
<body>
<input id="user-input">
<button id="check-btn"></button>
<button id="clear-btn"></button>
<div id="results-div"><div>
</body>
<script src="script.js"></script>
</html>

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

//Event Listeners

checkButton.addEventListener("click", () => {
  
  const input=userInput.value
  const regexNum= /^\(?(\d{3})\)?[.- ]?(\d{3})[.- ]?(\d{4})$/;
  
if(input===""){
alert("Please provide a phone number");
}else if(regexNum.test(input)){
resultsDiv.innerText=`Valid US number: ${input}`
}else {
  resultsDiv.innerText=`Invalid US number: ${input}`
}
return
 
 } )

clearButton.addEventListener("click", ()=>{
  resultsDiv.innerHTML=""
})
//Using the regex exp
 


/* file: styles.css */

Your browser information:

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

Challenge Information:

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

2

You have an issue with your regex. If you check your console, you should see this error:
Untitled
This is because you are defining an invalid range with [.- ] (twice).

(If you need to match a hyphen in a character class, you will need to escape it, or put it at the beginning/end of the character class, so that it is not interpreted as defining a range).

Also, in your HTML document, your script tag should come just before the closing body tag, not after it.

1 Like
3

That helped thanks alot

1 Like