Because if i declare the resultLog[ ] and counter in there, anytime that i click the chekcButton it will reset to 0, right? I was thinking of another way but i cant think of one.
It is, but where else should i declare it 
Jeremy’s been trying to tell you that writing code in the global scope will fail because the fCC tests run consecutively without reloading your code each time in between each test. Anything in the global scope will therefore not run.
Put all important code (such as code that reads the telephone number or that outputs a result) in the function that is triggered when check is called.
If the function that the check button runs needs to trigger another function to help it, then it can pass any important data to that other function as a parameter.
Okay, i will try that
2 Likes
I tried to put everything inside the encapsulatedVar() like this:
function encapsulatedVar() {
const numberRegex = /(?:^)1?[^2-9|0]?(\([0-9][0-9][0-9]\)|[0-9][0-9][0-9])[\s-]?[0-9][0-9][0-9][\s-]?[0-9][0-9][0-9][0-9](?:$|\s)/;
const isValid = (num) => numberRegex.test(num);
let resultLog = [ ];
let counter = 0;
checkButton.addEventListener("click", () => {
handleCheckClick(resultLog, counter);
});
clearButton.addEventListener("click", () => {
handleClearClick(resultLog);
counter = 0;
});
function handleCheckClick(resultLog) {
...
}
function handleClearClick(resultLog) {
...
}
}
and then call the encapsulatedVar() function in the end. This still didn’t work. Hmm…
Stop writing code in the global scope. Why don’t you go back to the spam filter project and see how it was done?
Base your code on that.
Okay, will check it now
I modified my code entirely and made this:
const userInput = document.getElementById("user-input");
const checkButton = document.getElementById("check-btn");
const clearButton = document.getElementById("clear-btn");
const logDiv = document.getElementById("results-div");
const numberRegex = /(?:^)1?[^2-9|0]?(\([0-9][0-9][0-9]\)|[0-9][0-9][0-9])[\s-]?[0-9][0-9][0-9][\s-]?[0-9][0-9][0-9][0-9](?:$|\s)/
const isValid = (num) => numberRegex.test(num)
function checkValues(validOrNot) {
logDiv.classList.remove("hidden");
if(!document.getElementById("log-head")){
const logHead = document.createElement("p");
logHead.id = "log-head";
logHead.textContent = "Result Log:";
logDiv.appendChild(logHead);
}
const logEl = document.createElement("p");
logEl.id = "log-el";
logEl.textContent = `${validOrNot} US number: ` + userInput.value;
if(logDiv.children.length > 1){
logDiv.insertBefore(logEl, logDiv.children[1]);
}else{
logDiv.appendChild(logEl);
}
userInput.value = "";
}
checkButton.addEventListener("click", () => {
if(userInput.value === ""){
alert("Please provide a phone number");
return;
}
if(isValid(userInput.value)){
checkValues("Valid");
}else if(!isValid(userInput.value)) {
checkValues("Invalid");
}
console.log(resultLog)
})
clearButton.addEventListener("click", () => {
while(document.getElementById("log-el")){
document.getElementById("log-el").remove();
}
document.getElementById("log-head").remove();
logDiv.classList.add("hidden");
})
But it still dont work
Can you be more specific about what “doesn’t work” looks like? What tests are failing?
When you click “clear” in your app are the results cleared?
EDIT: Tested your code and it does disappear. What I mean is pick 1 problem to work on, don’t just post a screenshot failing all the tests.
Pick one problem, the first failing test is good. Maybe explain what’s currently happening and why it’s confusing. Maybe try a different method of removing the content.
I would also rename some of your variables to make it easier to read and troubleshoot for yourself and others.
const logDiv = document.getElementById("results-div");
Why not call this variable resultsDiv instead of logDiv?
1 Like
Hmm… yeah. I have to rename some of the variables. Sometimes idk what names to put on variables so i put random ones. Also will try to find the problem and see what i can do
Please note that when they said to clear the element, they did not mean that you should remove it from existence. They just meant that its text content should be cleared or set to an empty string.
Yeah, i have to try that too.
I fixed what i could. I ended up with this code:
const userInput = document.getElementById("user-input");
const checkButton = document.getElementById("check-btn");
const clearButton = document.getElementById("clear-btn");
const logDiv = document.getElementById("results-div");
const logHeader = document.getElementById("result-head");
const numberRegex = /(?:^)1?[^2-9|0]?(\([0-9][0-9][0-9]\)|[0-9][0-9][0-9])[\s-]?[0-9][0-9][0-9][\s-]?[0-9][0-9][0-9][0-9](?:$|\s)/;
const isValid = (num) => numberRegex.test(num);
let resultLog = [];
function checkValues(validOrNot) {
resultLog.push(`${validOrNot} US number: ` + userInput.value);
if (!document.getElementById("log-head")) {
const logHead = document.createElement("p");
logHead.id = "log-head";
logHead.textContent = "Result Log";
logHeader.appendChild(logHead);
}
logDiv.innerHTML = '';
resultLog.slice(-3).reverse().forEach((log) => {
const logEl = document.createElement("p");
logEl.textContent = log;
logDiv.appendChild(logEl);
});
userInput.value = "";
}
checkButton.addEventListener("click", () => {
if (userInput.value === "") {
alert("Please provide a phone number");
return;
}
logDiv.classList.remove("hidden");
if (isValid(userInput.value)) {
checkValues("Valid");
} else {
checkValues("Invalid");
}
console.log(resultLog);
});
clearButton.addEventListener("click", () => {
resultLog = [];
logHeader.querySelector("#log-head")?.remove();
logDiv.innerHTML = '';
});
The problem now is that when i run tests here is what i get:
I pass the first test that is related to checking the number but i fail the rest. I have tested my regex and it works but idk why it still wont pass
You said that you tested your regex but you didn’t say how? Did you test your app and type in the failed test cases?
Also you still have a global variable:
As we mentioned to you, global variables may cause problems for the tests as they run in sequence without reloading your code. This means that whatever you put in this variable will stay there and not get reset between tests.
1 Like
I tested my regex on a website that helps you learn regex, i put all of the numbers in there and it automatically checks if they pass.
…I forgot about the global variables lol, will remove it and see how it goes
Edit:
I fixed my regex since it didn’t work with on of the tests. Now the regex is good but the same tests fail. Nothing changed
Please post your latest code
1 Like
HEYYY i think i finally found the problem hahaha. Let me explain what it was.
So whenever i do one of these projects i try to make it more complicated by implementing new things so that i make the website look better and have more features. I have been doing this since the HTML/CSS lessons. I feel like i learn more this way and also this makes me more patient when i try to code since i used to stop working when i couldnt find the solution.
In this case i tried to create a log of the results (something like the example, but better). Whenever the user added a value to the userInput and clicked the check button it would add the value in a log (logDiv). The log was inside of the “results-div”. The log held 3 elements (the latest values) and the tests failed because it had 3 elements and only the first test related to checking the numbers would pass because when the user clicks the “check” button for the first time, the log would have only 1 element (the rest would fail because the elements would keep adding)
Solution: Display the result of the current input on the results-div and add the log on a separate div so that it doesnt interfere with the tests.
…Sorry for all of this writing but i had to show the world how i completed this project with success hehehehe.
(Thanks everyone for helping me)
1 Like