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

JavaScript
1

Tell us what’s happening:

My code doesn’t pass the 35th test. I don’t know why.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>

  <body>
    <input type="text" id="user-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-btn");
const clearBtn = document.getElementById("clear-btn");
const resultsDiv = document.getElementById("results-div");
let regexArr = [
    /^1 \d{3}-\d{3}-\d{4}$/,
    /^1 \(\d{3}\) \d{3}-\d{4}$/,
    /^1\(\d{3}\)\d{3}-\d{4}$/,
    /^1 \d{3} \d{3} \d{4}$/,
    /^\d{10}$/,
    /^\d{3}-\d{3}-\d{4}$/,
    /^\(\d{3}\)\d{3}-\d{4}$/
];


clearBtn.onclick = ()=>{
    userInput.value="";
    resultsDiv.innerHTML="";
}
checkBtn.onclick = ()=>{
    const input = userInput.value.trim();
    if (!input)
    {
        alert("Please provide a phone number");
        return;
    }
    if (regexArr.some((regex)=>regex.test(input)))
    {
        resultsDiv.innerHTML = `Valid US number: ${input}`;
        userInput.value = "";
    }
    else 
    {
        resultsDiv.innerHTML = `Invalid US number: ${input}`;
        userInput.value = "";
    }
}

/* 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/133.0.0.0 Safari/537.36

Challenge Information:

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

2

Add a console.log() line in your code so you can see what numbers get tested and what the result is.

Then you can examine the list of numbers and see if there invalid entries that should be valid.

3

I have already tested my code on my browser, and it works fine. The problem is the 35th test itself. It says something pretty vague that it’s hard to test
1.When the #user-input element contains a valid US number and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: " followed by the number.

4

There is a case that you haven’t thought to test that is getting caught by the automated tests. You can’t see which number is failing.

You want to find out the specific number that is failing the test. That’s why you need to log all numbers to the console, and if it was valid or invalid. Then, when you run the tests, all the numbers will be output and you can see which one it might be.

Like this:

5

OK, now I understand, thank you

1 Like