Tell us what’s happening:
Can someone tell me what I’m doing wrong? My code isn’t returning anything, not even an error.
Your code so far
<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/script.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Telephone Number Validator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Telephone Number Validator</h1>
<form>
<input type="text" id="user-input">
<button id="check-btn">Check</button>
<button id="clear-btn">Clear</button>
</form>
<div id="results-div"></div>
</body>
</html>
/* file: styles.css */
/* file: script.js */
let resultsDiv = document.getElementById("results-div");
let checkBtn = document.getElementById("check-btn");
let clearBtn = document.getElementById("clear-btn");
let userInput = document.getElementById("user-input");
const numberRegex = [/^1? ?(( ?\d{3} [- ]*)|(\( ?\d{3}[- ]*\) *))\d{3}[- ]?\d{4}$/gm, /\d{10}/gm, /\d*\(\d[\d)]{3}\d{3}-\d{4}/gm, /\d{3}-\d{3}-\d{4}/gm, /^\d\s\d{3}-\d{3}-\d{4}/gm];
const input = userInput.value;
const matchNumber = () => {
if (userInput.length !== 10){
resultsDiv.textContent = "Please provide a phone number";
} else {
resultsDiv.textContent =
numberRegex.test(userInput.value)? `"Valid US number: ${input}"`: `"Invalid US number: ${input}"`;
}
}
/*function checkIfNumber(){
if (userInput.value === ""){
resultsDiv.textContent = "Please provide a phone number";
}
else {
return;
}
}*/
checkBtn.addEventListener("click", () => {
matchNumber(input);
})
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15
Challenge Information:
Build a Telephone Number Validator Project - Build a Telephone Number Validator