Problem in Telephone Number Validator Project

JavaScript
1

While writing the JavaScript code for this project, everything is working except for Step 35 and Step 36.

  • Step 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.
  • Step 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.

However, I believe I have already included this in my code. Can you help me understand why it is not working?

JS code:

     const checkBtn = document.getElementById('check-btn');
const clearBtn = document.getElementById('clear-btn');
const resultsDiv = document.getElementById('results-div');

checkBtn.addEventListener('click', () => {
  const userInput = document.getElementById('user-input').value;
  const regex = /^(1\s?)?(\(\d{3}\)|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}$/;

  if (!userInput) {
    alert('Please provide a phone number');
    resultsDiv.textContent = `Please provide a phone number`
  } else if (regex.test(userInput)) {
    resultsDiv.textContent = `Valid US number: ${userInput}`;
  } else {
    resultsDiv.textContent = `Invalid US number: ${userInput}`;
  }
});

clearBtn.addEventListener('click', () => {
  resultsDiv.textContent = ''; 
  document.getElementById('user-input').value = '';
});
2

can you provide all your html and javascript, and a link to the project please?

3

How can i send the link of the project i would love to share it with you

4

it’s the one in the browser url bar, you can share it the same way you share any other web page link

5
6

thank you, now it would be great to have the code

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

ok can you see my code and tell me why its not done

8

If you post your code here I can see it, if you don’t I can’t

9 
<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Telephone Number Validator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  
  <h2 class="soft-black">Telephone Number Validator</h2>
  
  <div class="phone">
      <h3>Enter the number</h3>
      <input id="user-input" >
      <div class="bottom-buttons">
        <button id="check-btn" class="btn">Check</button>
        <button id="clear-btn" class="btn">Clear</button>
      </div>
      
 </div>
   <div id="results-div" class="result"> </div>
   <script src="script.js"> </script>
</body>
</html>

JS Code:

const checkBtn = document.getElementById('check-btn');
const clearBtn = document.getElementById('clear-btn');
const resultsDiv = document.getElementById('results-div');

checkBtn.addEventListener('click', () => {
  const userInput = document.getElementById('user-input').value;
  const regex = /^(1\s?)?(\(\d{3}\)|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}$/;

  if (!userInput) {
    alert('Please provide a phone number');
    resultsDiv.textContent = `Please provide a phone number`
  } else if (regex.test(userInput)) {
    resultsDiv.textContent = `Valid US number: ${userInput}`;
  } else {
    resultsDiv.textContent = `Invalid US number: ${userInput}`;
  }
});

clearBtn.addEventListener('click', () => {
  resultsDiv.textContent = ''; 
  document.getElementById('user-input').value = '';
});
10

you need to have userInput in the global scope, also it must be the element not the value

it is a bug in the tests, not an issue with your code tho

11

Thanks Bro… It’s done

13

hi @joelmmasikini please create your own topic to ask for help, and do not ask to copy other people’s code, that’s against the Academic Honesty Pledge

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.