Tell us what’s happening:
Test 17 fails, however the output is correct, and a similar test passes (16). The correct output is ‘Valid US number: 1 456 789 4444’ and that is what i get trying it manually. What my code does is that it iterates over 7 regexes then if a match is found prints the message ‘Valid US number: ${input}’ Im confused as the test should pass, please help ;c
Your code so far
<!-- file: index.html -->
<DOCTYPE html>
<html lang="es">
<head>
<title>Phone checker</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Phone checker</h1>
<p>Enter a phone number and check if the number is valid in the US.</p>
<form>
<label for="input-numero">Phone number</inputNumero>
<input id="user-input"><br/>
<button id="check-btn">Check</button>
<button id="clear-btn">Clear</button>
</form>
<section>
<div class="output" id="results-div"></div>
</section>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const userInput = document.getElementById("user-input");
const resultsDiv = document.getElementById("results-div");
const regex1= /^1\s\d{3}-?\d{3}-?\d{4}$/g;
const regex2= /^1\s\(\d{3}\)\s\d{3}-\d{4}$/g;
const regex3= /^1\(\d{3}\)?\d{3}-?\d{4}$/g;
const regex4= /^1\s\d{3}\s\d{3}\s\d{4}$/g; //1 456 789 4444
const regex5= /^\d{10}$/g;
const regex6= /^\d{3}-\d{3}-\d{4}$/g;
const regex7= /^\(\d{3}\)\d{3}-\d{4}$/g;
const patterns = [regex1,regex2,regex3,regex4,regex5,regex6,regex7];
clearBtn.addEventListener("click", ()=>{
resultsDiv.innerHTML="";
})
checkBtn.addEventListener("click", ()=>{
const input = userInput.value;
if(input == ""){
alert("Please provide a phone number");
return 0;
};
var passes = 0
patterns.forEach(regex => {
if(regex.test(input)){
passes=1
console.log(regex,passes)
}
return passes
})
if(passes==1){
resultsDiv.innerHTML += `<span>Valid US number: ${input}</span>`;
return 0
}else{
resultsDiv.innerHTML += `<span>Invalid US number: ${input}</span>`
return 0;
};
}
)
/* file: styles.css */
section{
display:flex;
}
span{
display:inline-block;
width: 100%;
background-color: #afafaf;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:139.0) Gecko/20100101 Firefox/139.0
Challenge Information:
Build a Telephone Number Validator Project - Build a Telephone Number Validator