Tell us what’s happening:
Hello everyone;
Six days ago, I have been working on my test project(Telephone Number Validator). During these time interval, I have written over four different regex to execute the tasks and complete the Test, but I continue to experience the same problem with each of the single line regex I wrote. My App is fully functioning like the example app in the project. In the App I built, All of the Valid US Numbers and the Invalid US Numbers work perfectly and send out the expected results, but In the project, only the Valid US Numbers passed with Check Marks and the Invalid US Number remains with the X marks. Can someone please review my code in the attachment below and point out what I am missing. Your help will highly be appreciated.
//imported elements
const userInput = document.getElementById("user-input");
const resultsDiv = document.getElementById("results-div");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
//general regex for US Nnmber
const usaNumRegex = /^1?\s?(\(\d{3}\)|\d{3})[\-\s]?\d{3}[\-\s]?\d{4}$/;
//number tester
const validateNumber = num =>usaNumRegex.test(num);
//checkbtn event listener
checkBtn.addEventListener("click", ()=>{
if (userInput.value === "") {
resultsDiv.textContent = alert("Please provide a phone number");
}
resultsDiv.textContent = validateNumber(userInput.value)? `Valid US number: ${userInput.value}` :`Invalid US number:${userInput.value}`;
userInput.value ="";
return;
})
//clear button
clearBtn.addEventListener("click", ()=>{
resultsDiv.textContent = "";
userInput.value = "";
//userInput.value=localStorage.remove();
return;
});