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

JavaScript
1

Tell us what’s happening:

Heyyy, I have been trying this for some time now… I don’t understand where exactly I have gone wrong, the results are not showing…
Also, I believe that the clear button is working but for some reason the test keeps on failing.
It would be really appreciated if anyone could look into my code and check what I did wrong..
Thank youu

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <head></head>
  <body>
    <h2>Telephone Number Validator</h2>
    <input id="user-input">
    <button id="check-btn" required>Check</button>
    <button id="clear-btn" required>Clear</button>
    <div id="results-div"></div>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */


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

checkBtn.addEventListener("click", (str) => {
  if(input.value === "") {
     window.alert("Please provide a phone number");
  } else {
    return validNumber;
  }
});

const phoneNumber = (str) => {
let regex = /^(1\s?)?(\d{3}|\(\d{3}\))[\-\s]?\d{3}[\-\s]?\d{4}$/;
return regex.test(str);

}

console.log(phoneNumber("1(555)555-5555"));

const validNumber = () => {
  if(phoneNumber = true) {
    result.textContent = `Valid US number: ${input}`;
  } else {
    result = `Invalid US number: ${input}`;
  }
};

const clear = () => {
  input.value = "";
  result.remove();
};

clearBtn.addEventListener("click", clear);

Your browser information:

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

Challenge Information:

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

2

  • I don’t think you can .remove() the result element because I would expect the test to check that element’s content was cleared. So it is going to look for the element and throw an error when it can’t query it.

  • validNumber and phoneNumber are functions. But you are not using them as such.

return validNumber;

if(phoneNumber = true)
  • = is the assignment operator, not the equality operator.
3

Oh yes, thank you, you are right I did not use them as functions. I corrected the one near the return keyword.
Also, I never initially used the remove method. I only used it because even tho the clear-btn worked, the test kept failing. And I understood what you said about the phoneNumber() function used for the if statement. I tried it but it is not working…

4

Post your updated code if you need more help.

5 
const input = document.getElementById("user-input");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const result = document.getElementById("results-div");

checkBtn.addEventListener("click", (str) => {
  if(input.value === "") {
     window.alert("Please provide a phone number");
  } else {
    return validNumber();
  }
});

let regex = /^(1\s?)?(\d{3}|\(\d{3}\))[\-\s]?\d{3}[\-\s]?\d{4}$/;
let regexTest  = regex.test(input.value);

const validNumber = () => {
  if(regexTest = true) {
    result.innerText = `Valid US number: ${input.value}`;
  } else {
    result.innerText = `Invalid US number: ${input.value}`;
  }
};

const clear = () => {
  input.value = "";
  result.innerText = "";
};

clearBtn.addEventListener("click", clear);
6

I made changes and everything except invalid input is correct.

7

do you want to compare or assign a value to regexTest?

8

Thank you so much, I didn’t realize it .

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.