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

JavaScript
1

Tell us what’s happening:

My clear button just won’t work. This is the code:
function clear() {
results.innerText = “”;
userInput.value = “”;
}
clearBtn.addEventListener(“click”, clear)

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>US Phone Number Validator
    </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
  <link rel="style sheet" href="styles.css">
  <body>
<h1>Telephone Number Validator</h1>
<div id="phone1">
    <button id="check-btn">Check</button>
    <button id="clear-btn">Clear</button>

  <div id="phone2">
    <h3> Enter a number:</h3>
    <input type="text" min="10" max="11" id ="user-input">
<div id="results-div"></div>
  </div>
  <div id="phone3"></div>
  <div>
<script src="script.js"></script>
  </body>

</html>

/* file: script.js */
const clearBtn = document. getElementById("clear-btn");
const checkBtn = document. getElementById("check-btn");
function validator (){
const userInput = document. getElementById("user-input");
const results = document. getElementById("results-div");
const regex = /^(1\s?)?(\(\d{3}\)|\d{3})([\s-]?)\d{3}([\s-]?)\d{4}$/g
if(userInput.value === ""){
    alert("Please provide a phone number");
    return;
  }else if (regex.test(userInput.value)){
results.innerText = `Valid US number: ${userInput.value}`
  }else{
results.innerText = `Invalid US number: ${userInput.value}`
  }
}
function clear (){
  results.innerText = "";
  userInput.value = "";
}
checkBtn.addEventListener("click", validator);
clearBtn.addEventListener("click", clear);

/* file: styles.css */
#phone1{
background:black;
width: 75%;
height:400px;
position:absolute; 
top:45%;
left:12.5%;
border-radius: 10px;
}
#phone2{
  background:grey; 
  width:80%;
  height:315px;
  position:absolute; 
  top:7.5%;
  left:10%; 
}
#phone3{
  background:#ffdfe2; 
  width:12.5px;
  height:12.5px;
  position:absolute; 
  top:2%;
  left:48.5%;
  border-radius:10px;
  
}
h1, h3{
text-align:center;
text-decoration:underline;  
}
#user-input{
  width:90%;
  height:40px;
  border-radius:5px;
  position:absolute; 
  left: 5%;
  font-size: 20px;
  font-weight:bold; 
}
button{
  position:absolute; 
  top:87.5%;
  width:64.5px;
  height:32.5px;
  font-size:17.5px;
  border-left:5px;
}
#check-btn:active {
background-color: green;
transform: translateY(1px);
}
#clear-btn:active {
background-color: red;
transform: translateY(1px);
}
#clear-btn {
  position:absolute; 
  right:10%;
}
#check-btn {
position:absolute; 
left:10%;
}
#results-div{
  position: absolute;
  top: 35%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36

Challenge Information:

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

2

These are inaccessible in the global scope, as they are defined inside the validator function.
That’s why your clear function isn’t working. It can’t access those variables.

3

Thanks, problem solved

1 Like