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

JavaScript
1

Tell us what’s happening:

  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.

Failed:36. 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.

I cant pass test 35 and 46. Please tell me what happening

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<input id="user-input">
<button id="check-btn">Check</button>
<button id="clear-btn">Clear</button>
<div id="results-div">result here</div>



<script src="script.js"></script>
</body>
</html>

/* file: script.js */
const input=document.getElementById('user-input');
const check=document.getElementById('check-btn');
const clear=document.getElementById('clear-btn');
const result=document.getElementById('results-div');

const regex=/^(1\s?)?(\(\d{3}\)|\d{3})([\s\-])?\d{3}([\s\-])?\d{4}$/


check.addEventListener('click',()=>{
//const inputValue=input.value.trim();

  if (input.value===''){
    alert("Please provide a phone number");
    result.innerHTML="";
    }else if(regex.test(input.value)) {
      result.innerText=`Valid US number: ${input.value}`
    }else{
      result.innerText=`Invalid US number: ${input.value}`
    }
  

    //return regex.test(inputValue)? result.innerText="Valid US number: "+inputValue: result.innerText="Invalid US number: " +inputValue;
  

})

clear.addEventListener('click',()=>{
  result.innerText="";
})

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

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

1 Like
2

There is bug in the tests. If you change the following variables and their occurrences in code, everything will pass:
input → userInput
check → checkBtn
result → resultsDiv

5 Likes
3

Hi @sanity
I did these, test 36 passes 35 still fails :frowning: .
Any idea?

Commented the same here:

1 Like
4

@raqib.bjit
For the convenience please start new thread and include your code.

1 Like
5

Has this been reported to fCC folks? I’m doing this test today and running into the same bug. I pass the first 34 tests, but not the lasts ones (which are just more generic versions off the previous tests).

2 Likes
6

I just got to this exact point and was confused too. are there additional ways to type a phone number that they want us to account for, but that are too secret to specify?

1 Like
7

I updated my code with those variable names too but I’m still not passing the 2 last tests, here is my code in example.

window.addEventListener("DOMContentLoaded", function() {
  var userInput = document.getElementById("user-input");
  var checkBtn = document.getElementById("check-btn");
  var clearBtn = document.getElementById("clear-btn");
  var resultsDiv = document.getElementById("results-div");
  var usPhoneRegex = /^1?[- ]*(\d{3}|\(\d{3}\))[- ]*(\d{3})[- ]*(\d{4})$/;
  checkBtn.addEventListener("click", checkFunction);
  clearBtn.addEventListener("click", clearFunction);
  function validUsNumber (num) {
    return usPhoneRegex.test(num);
  }
  function checkFunction(event) {
    resultsDiv.replaceChildren();
    if(!userInput.value){
        alert(`Please provide a phone number`);
    }else if(validUsNumber(userInput.value)){
      const createdParagraph = document.createElement('p');
      createdParagraph.innerText = `Valid US number: ${userInput.value}`;
      resultsDiv.appendChild(createdParagraph);
    }else{
      const createdParagraph = document.createElement('p');
      createdParagraph.innerText = `Invalid US number: ${userInput.value}`;
      resultsDiv.appendChild(createdParagraph);
    }
  }
  function clearFunction (){
    resultsDiv.replaceChildren();
  }
}, false);
8

Also, I keep getting these errors on console even when not having a “resultsDiv” variable.

// running tests
35. 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.
36. 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.
// tests completed
// console output
[ReferenceError: resultsDiv is not defined]
[ReferenceError: resultsDiv is not defined]
9

Check this solution

10

Check this solution

11

Check this solution

12

Do you have an example to provide besides from that? I’, still getting errors

window.addEventListener("DOMContentLoaded", function() {
  const userInput = document.getElementById('user-input');
  const checkBtn = document.getElementById('check-btn');
  var clearBtn = document.getElementById("clear-btn");
  const resultsDiv = document.getElementById('results-div');
  var usPhoneRegex = /^1?[- ]*(\d{3}|\(\d{3}\))[- ]*(\d{3})[- ]*(\d{4})$/;
  checkBtn.addEventListener("click", checkFunction);
  clearBtn.addEventListener("click", clearFunction);
  function validUsNumber (num) {
    return usPhoneRegex.test(num);
  }
  function checkFunction(event) {
    resultsDiv.replaceChildren();
    if(!userInput.value){
        alert(`Please provide a phone number`);
    }else if(validUsNumber(userInput.value)){
      const createdParagraph = document.createElement('p');
      createdParagraph.innerText = `Valid US number: ${userInput.value}`;
      resultsDiv.appendChild(createdParagraph);
    }else{
      const createdParagraph = document.createElement('p');
      createdParagraph.innerText = `Invalid US number: ${userInput.value}`;
      resultsDiv.appendChild(createdParagraph);
    }
  }
  function clearFunction (){
    resultsDiv.replaceChildren();
  }
}, false);
13

Declare these globally, not in the function and don’t use var:

There is a bug in the tests for this project so you might want to skip it until the fix is pushed.

If you have more questions please open a new thread.

16

Hi, has this been fixed? Declaring a global variable hasn’t worked.

17

Can you open a new topic for your query or if you have opened a topic already please update that with your updated code. I’ll go ahead and close this thread now.