Tell us what’s happening:
Hello! Has the bug mentioned in the below forum been fixed yet? I can see the correct result messages appearing, yet it still will not pass tests 7-36.
I would appreciate a reply! Thanks!
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Telephone Number Validator</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<form>
<label id="enter-number" class="enter-number">Enter number:</label>
<br>
<input id="user-input" class="user-input">
<br>
<button type="submit" id="check-btn" class="check-btn">Check</button>
<button id="clear-btn" class="clear-btn">Clear</button>
<div id="results-div" class="results-div"></div>
</form>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
//Get the user input.
const userInput = document.getElementById("user-input");
//Get the check button.
const checkBtn = document.getElementById("check-btn");
//Get the clear button.
const clearBtn = document.getElementById("clear-btn");
//Get the results message area.
const resultsDiv = document.getElementById("results-div");
//Function to run if the user entered anything.
const checkIfValidNumber = () => {
//Get the phone number from the user input.
const phoneNumber = userInput.value;
//Regular expression to validate US phone numbers.
const phoneRegex = /^(1\s?)?(\(\d{3}\)|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}$/;
//Check if the phone number matches the regular expression.
if (phoneRegex.test(phoneNumber)) {
//If it matches, let the user know that the number is valid.
resultsDiv.textContent = "Valid US number: " + phoneNumber;
} else {
//If it doesn't match, let the user know that the number is invalid.
resultsDiv.textContent = "Invalid US number: " + phoneNumber;
}
}
//Function to run when the check button is clicked.
const checkInput = () => {
//Check if the user entered anything.
if (userInput.value == "") {
alert("Please provide a phone number");
} else {
checkIfValidNumber();
}
};
//Function to run when the clear button is clicked.
const clear = () => {
//Clear the user input.
resultsDiv.textContent = "";
};
//When the check button is clicked, run the checkInput function.
checkBtn.addEventListener("click", checkInput);
//When the clear button is clicked, run the clear function.
clearBtn.addEventListener("click", clear);
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Challenge Information:
Build a Telephone Number Validator Project - Build a Telephone Number Validator