My telephone numbers are coming out as valid and invalid, but I'm still failing the tests for some reason

JavaScript
1

Tell us what’s happening:

My code is working, but the test is still failing. Am I just doing it in a way that FCC doesn’t want me to?

I’m getting these errors for every 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.

  2. When the #user-input element contains an invalid US number and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: " followed by the number.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <title>Phone Validation</title>
</head>
<body>
<header>
    <div id="banner">
        <h1 id="title">Phone Number Validator</h1>
    </div>
</header>
<main>
    <div id="input">
        <input id="user-input" type="tel" placeholder="Enter your phone number:">
        <button id="check-btn" type="button" onclick="checkNum()">Check</button>
        <button id="clear-btn" type="button" onclick="clearNum()">Clear</button>
    </div>
    <div id="results-div">
    </div>
</main>
<script language="JavaScript" type="text/javascript" src="script.js"></script>
</body>
</html>

/* file: script.js */
let phoneHistory = [];

function checkNum() {
    const input = document.getElementById("user-input").value.trim();
    const resultsDiv = document.getElementById("results-div");
    const regex = /^(1\s?)?(\(\d{3}\)|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}$/;

    if (input === "") {
        alert("Please provide a phone number");
        return;
    }

    if (regex.test(input)) {
        phoneHistory.push(`<span style="color: green;">Valid US number: ${input}</span>`);
    } else {
        phoneHistory.push(`<span style="color: red;">Invalid US number: ${input}</span>`);
    }

    const reversedHistory = phoneHistory.slice().reverse();

    document.getElementById("user-input").value = "";
    resultsDiv.innerHTML = reversedHistory.join("<br>");
    resultsDiv.style.display = "block";
    resultsDiv.style.backgroundColor = "black";
    resultsDiv.style.textAlign = "center";
}

function clearNum() {
    document.getElementById("user-input").value = "";
    phoneHistory = [];
    const resultsDiv = document.getElementById("results-div");
    resultsDiv.innerHTML = "";
    resultsDiv.style.display = "none";
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 OPR/116.0.0.0

Challenge Information:

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

2

There might be some test cases you are not handling correctly. It generates a random US number every time for those two tests.

3

Welcome to the forum @CarsonBeck

The results are added to a list, which is not a requirement for the tests.

Also, I noticed you declared the resultsDiv twice in your code.
You can declare it once in the global scope.

Happy coding

4

There is a bug in the tests for this project. There is a fix in the works. You can try this solution:

But you may also want to skip it until it’s fixed.

Note that these variables must be named like this. ie userInput not input

5

Would the results being added to an array cause the tests to fail though?

6

I’m not sure. As @pkdvalis suggested, wait until the fix is implemented, then test your code.