This question is more to see if I can get some information about the "design pattern" that I tried to implement here. I'm learning about closing in JavaScript and I think I'm starting to understand it. I wonder if the way I wrote this code is of good quality, something that you would expect to see in the production code or at least something a little more "united". Open to any criticism, obviously, here to learn.
The code in question is trying to respond to a given challenge in JavaScript: The Hard Parts (by Will Sentance) in Frontend Masters. According to the challenge, it seems that I went further because the solution provided, when executed, does not work correctly.
The challenge:
Write a changeColor function that when invoked first will verify if
the background color of the current page is "rgb (221, 238, 255)". Yes it is
change the color to "rgb (255, 238, 221)". If it is not, it establishes the
color to "rgb (221, 238, 255)".Add a click event listener to the previous # 1 button (it has an "activate" ID). When you click, the button must log in to the console "pressed
1. You must also configure an event listener by clicking on button # 2 (ID of
"colour"). That listener must log in to the console "click 2" and then
call the changeColor function that you just created.Clear the console and press the & # 39; Run with JS & # 39; Look what code has been executed analyzing the console. Next, try changing the
background color by clicking on button # 2. What has to happen for the
button to work?
According to the wording of the challenge, it seemed that the suggested solution was (in pseudo-ish code):
activationButton.addEventListener ("click", () => {
console.log ("activation button pressed")
colorChangerButton.addEventListener ("click", () => {
console.log ("pressed color changer button")
change the color ()
})
})
The obvious problem with the above code is that a new event listener will be added to the ChangerButton color each time you click on the activation button. This is where I started thinking about trying to use a closure to track a state variable so I can make sure that the listener of the event is only added to the second button once. In addition, this is the solution provided in the set of solutions for the challenge.
For that purpose, this is what I came up with (suppose the correct HTML is there, etc.):
(function () {
come on clickCount = 0
changeColor () {function
if (document.body.style.backgroundColor === "rgb (221, 238, 255)") {
document.body.style.backgroundColor = "rgb (255, 238, 221)"
} else {
document.body.style.backgroundColor = "rgb (221, 238, 255)"
}
}
enableButton2 () {function
const btn2 = document.querySelector (& # 39; # color & # 39;)
btn2.addEventListener ("click", () => {
console.log ("click # 2")
change color ()
})
}
const btn1 = document.querySelector (& # 39; # enable & # 39;)
btn1.addEventListener ("click", () => {
clickCount ++
yes (clickCount === 1) {
activateButton2 ()
}
console.log ("click # 1")
he came back
})
he came back {
changeColor: changeColor,
activateButton2: activateButton2
}
}) ()
This works the way I would expect: the color change functionality and the console logs are activated as I expected.
One question I had was about containing the button variables within the IIFE. I feel like I see a lot of front-end scripts that put all the query selectors at the top of the script. Is there any reason to do so instead of including them within a function like this? If I understand the closing correctly, once the event handlers are created, there is a persistent reference to everything in the IIFE, so I can activate this function and the buttons and their controllers persist and behave as expected.
It also seems that you could probably use a Boolean to track the "click" status of the first button, and a change statement to verify the background color of the page.
Any other pointer that someone wants to offer?
