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

JavaScript
1

Tell us what’s happening:

Test 1 - 34 succeed. The 7 valid phone numbers succeed.
But test 35 and 36 fail. I have no idea why.
Are there some options I didn’t think of?

I saw another forum post with the tip to make the 4 getElementById global, but I have that already.

Any idea what I can test?

Your code so far

<!-- file: index.html -->
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <input id="user-input"></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 input = document.getElementById("user-input");
const check = document.getElementById("check-btn");
const clear = document.getElementById("clear-btn");
const results = document.getElementById("results-div");
const regex = /^1?[\s\(]*\d{3}[\s]*[\)-]?[\s]*\d{3}[\s-]?\d{4}$/;
const cleanRegex = /[-\(\)\s]+/g;
const beginRegex = /^\(\d{3}\)/;
const nummerRegex = /\d/;

check.addEventListener("click", checkFunction);
clear.addEventListener("click", clearFunction);

function clearFunction() {
  input.value = "";
  results.innerHTML = "";
}

function checkFunction() {
  const cleanInput = input.value.replace(cleanRegex, "");
    
  if(!input.value){
  alert("Please provide a phone number");
  } else if(cleanInput.length > 10 && cleanInput[0] !== "1" || cleanInput.length > 11){
      results.innerText = "Invalid US number: " + input.value;
     
    } else if(input.value.includes("(") && !input.value.includes(")") || 
              input.value.includes(")") && !input.value.includes("(")){
        results.innerText = "Invalid US number: " + input.value;
      } else if(input.value[0] === "(" && !beginRegex.test(input.value)) {
        results.innerText = "Invalid US number: " + input.value;
      } else if(!nummerRegex.test(input.value[0]) && input.value[0] !== "("){
        results.innerText = "Invalid US number: " + input.value;
      } else if(!regex.test(input.value)) {
        results.innerText = "Invalid US number: " + input.value;
        } else {
          results.innerText = "Valid US number: " + input.value;
          } 
}

/* file: styles.css */
#clear-btn {
  margin-left: 100px;
}

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

there is a bug in the tests, you need to have these as global variables:

const clearBtn = document.getElementById("clear-btn");
const userInput = document.getElementById('user-input');
const checkBtn = document.getElementById('check-btn');
const resultsDiv = document.getElementById('results-div');
3

Thanks! I only checked if they were global, but they need these exact names. Stupid!