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

JavaScript
1

Tell us what’s happening:

Everything is correct. Everything is working but the tests say the results don’t show? But they do show :frowning:
pls help

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Phone Number Validator</title>
    <style>
        * {
            box-sizing: border-box;
            background-color: #2e3440;
            color: snow;
        }
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            width: 25%;
            margin: 10px auto;
        }
        #header {
            color: orangered;
            font-size: 2rem;
            margin: 40px 0;
        }
        .text, .btn {
            width: 100%;
        }
        .btn {
            height: 2rem;
            padding: 0 6px;
            margin: 4px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            background-color: snow;
            color: #2e3440;
        }
        #results-div {
            padding: 10px;
            width: 100%;
            margin-top: 20px;
            border: 1px solid snow;
            min-height: 50px;
        }
    </style>
</head>
<body>
    <div id="header">Phone Number Validator</div>
    <input class="text" id="user-input" />
    <button class="btn" id="check-btn">Check</button>
    <button class="btn" id="clear-btn">Clear</button>
    <div id="results-div"></div>

    <script>
        const userInput = document.getElementById("user-input");
        const result = document.getElementById("results-div");

        document.getElementById("check-btn").addEventListener("click", () => {
            const input = userInput.value;
            if (!input) {
                alert("Please provide a phone number");
            } else {
                const regex = /^(1\s?)?(\(\d{3}\)|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}$/;
                result.textContent = regex.test(input) ? `Valid US number: ${input}` : `Invalid US number: ${input}`;
            }
        });

        document.getElementById("clear-btn").addEventListener("click", () => {
            userInput.value = "";
            result.textContent = "";
        });
    </script>
</body>
</html>


/* file: script.js */


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Challenge Information:

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

2

Hi,
It looks like you are not passing the last two steps because the error prompts that resultsDiv is not defined. It’s basically because you have stored your #results-div input in a const called result and the system wants the variable to be resultsDiv. The similar thing applies to your #check-btn.
Try working on that and you’re good to go!

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

there is a bug in the tests, you need to use these variables (and they need to go in the global scope)

4

Weird point for the test to be stuck on. Appreciate it though. Spent an hour looking over the code thinking I made a mistake somewhere.

5

yeah, it’s a bug, not how things should be

6

I have a similar problem, and added these variables, but case 36 is still not passing. Its weird cause case 35 (for Valid numbers) was actually fixed along with the console errors regarding “resultsDiv” not defined. The string is identical to the use case not sure whats going on case 36 is the only one not passing, all other 35 passed. This bug is preventing me from completing the certification when clearly the test is passed :frowning:

This is how the strings are built

if (phoneValid(value)) {
      write(`Valid US number: ${value}`)
    } else {
      write(`Invalid US number: ${value}`)
    }
    
  }

This is how im replacing the text (tried both textContent and innerHTML in case some weird formatting was happening)

function write(value) {
    resultsDiv.textContext = value
    resultsDiv.innerHTML = value
  }
7

please create your own topc

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.