Other similar topics have been closed. I’ve tried the fix here but test 35 is not working.
- 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
JS
/* file: script.js */
const clearBtn = document.getElementById("clear-btn");
const userInput = document.getElementById('user-input');
const checkBtn = document.getElementById('check-btn');
const resultsDiv = document.getElementById('results-div');
const teleValidator = (() => {
// -----DOM-----
// let checkBtn, clearBtn, userInput, resultsDiv;
const init = () => {
// userInput = document.getElementById("user-input");
// checkBtn = document.getElementById("check-btn");
// clearBtn = document.getElementById("clear-btn");
// resultsDiv = document.getElementById("results-div");
if (!userInput | !checkBtn | !clearBtn | !resultsDiv) {
console.error("DOMs are missing!");
return;
}
eventHandler();
console.log("Beep boop!");
};
// -----Data-----
// -----Helper-----
const regexArea = /^(1\s\d{3}-|1\s\(\d{3}\)\s|1\(\d{3}\))\d{3}-\d{4}$/;
const regexArea_2 = /^1\s\d{3}\s\d{3}\s\d{4}$/;
const regexNoArea = /^(\(\d{3}\)\d{3}-\d{4}|\d{3}-\d{3}-\d{4}|\d{10})$/;
const regexArray = [regexArea, regexArea_2, regexNoArea];
// -----Core-----
const checkTel = () => {
console.log("works");
const telValue = userInput.value;
if (telValue == "") {
alert("Please provide a phone number");
return;
} else {
updateResults(telValue);
}
};
const isValid = (x) => {
return regexArray.some((regex) => regex.test(x));
// return regexArea_2.test(x)
};
const updateResults = (x) => {
if (isValid(x)) {
resultsDiv.innerHTML = `<p>Valid US number: ${x}</p>`;
} else {
resultsDiv.innerHTML = `<p>Invalid US number: ${x}</p>`;
}
};
const clear = () => {
resultsDiv.innerHTML = "";
};
// -----Event listeners-----
const eventHandler = () => {
if (checkBtn && clearBtn) {
checkBtn.addEventListener("click", checkTel);
clearBtn.addEventListener("click", clear);
} else {
console.error("The butts are missing!");
}
};
// -----Init-----
return {
init: init,
};
})();
teleValidator.init();
HTML:
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="script.css">
</head>
<body>
<input id="user-input" type="text"></input>
<button id="check-btn">check</button>
<div id="results-div"></div>
<button id="clear-btn">clear</button>
</body>
<script src="script.js"></script>
</html>
UPDATE:
I removed the encapsulation. The test (35) passes when using a single regex that covers all forms instead of an array. (disregarding lookarounds/whether space or hyphens exist before)
/* file: script.js */
let x = userInput.value
if (regex.test(x)) {
resultsDiv.textContent = "Valid US number: " + x;
} else {
resultsDiv.textContent = "Invalid US number: " + x;
}}
This array or isValid function fails.
/* file: script.js */
let x = userInput.value
if (regexArray.some((regex) => regex.test(x)) {
resultsDiv.textContent = "Valid US number: " + x;
} else {
resultsDiv.textContent = "Invalid US number: " + x;
}}
