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

JavaScript
1

Tell us what’s happening:

Everything seems to be working when I’m checking the function with ‘console.log(telephoneChecker())’ but it doesn’t allow me to pass the test

What am I doing wrong?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width initial-scale=1.0" />
  <head>
    </head>
    <body>
      <input id="user-input"></input>
      <button id="check-btn"></button>
      <button id="clear-btn"></button>
      <div id="results-div"></div>
      <script src="script.js"></script>
      </body>
  </html>

/* file: styles.css */


/* file: script.js */
const userInput = document.getElementById("user-input");
const checkButton = document.getElementById("check-btn");
const clearButton = document.getElementById("clear-btn");
const results = document.getElementById("results-div");
const regex = /^(1\s?)?(\(\d{3}\)|\d{3})([\s\-]?)\d{3}([\s\-]?)\d{4}$/;

const telephoneChecker = (str) => {
  if (str.match(regex)) {
    results.innerHTML = `<p>Valid US number: ${str}</p>`
  } else {
    results.innerHTML = `<p>Invalid US number: ${str}</p>`
  }
}

checkButton.addEventListener("click", () => {
  if(userInput.textContent === "") {
    alert("Please provide a phone number")
  } else {
    return telephoneChecker(userInput.textContent)
  }
} )

clearButton.addEventListener("click", () => {
  results.innerHTML = "";
})


console.log(telephoneChecker("2(757)622-7382"))

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3 Safari/605.1.15

Challenge Information:

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

2

What happens when you click the check button in your validator?

1 Like
3

Using textContent on input element will always return empty string "". That’s becuase textContent returns the text content of elements like <div> or <p>
( text between its tags)

Use value to access the value entered by the user in input elements like <input> or <textarea>.

So you need to change .textContent to .value and you are all good.

4

That makes perfect sense. Thank you

1 Like
5

It said ‘Please provide a phone number’ but now I see because it saw it empty because of textContent

Changed it to .value and now its solved

6

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