<link rel="..." />
... Here goes all the HTML ...
No, not quite. The line
Originally Posted by Borgard
will just find all checkboxes within the element with id "wrapper" and store that list in the array allCheckboxes. Then at the bottom of the code I go through this list and attach an onChange listener to every checkbox. So each checkbox still does have a handler, but they all use the same function rather than different ones.
var allCheckboxes = document.getElementById( 'wrapper' ).querySelectorAll( 'input[type="checkbox"]' );
Yes! Using this little config variable allows me to get rid of all these functions you had, because they all did the same thing, only that they used different ids. So by extracting it into a variable I could "melt" them all down into one single method.
Then you made a config variable that consisted of each of the different functions I had going on, so 'Bernini' is the specific checkboxes 3, 10, etc and the 2 specific grey boxes that won't display? Then the same thing for each of what I had as functions yesterday?
It's also nice because it makes it much easier to modify the code – say you want to have another checkbox activate "Picasso", then you only have to update the config rather than working your way through the entire code to find the one spot where you had to change it before. It makes the code easier to understand and more maintainable.
Indeed! Basically, what happens now when the user clicks any checkbox is:
And all the "magic" really happens in the handleCheckbox funtion?
- Everything is reset (all checkboxes enabled, all grey boxes are shown)
- Now we loop through every checkbox that is checked and execute handleCheckbox for it
- handleCheckbox disables the checkboxes/grey boxes it is configured to disable
So basically we rebuild the result from scratch whenever the user does something. That way we don't have to make complicated checks to see what we have to en-/disable.
That's okay. I'm actually surprised how far you got with this on your own, seeing how you are a beginner. I can tell you put quite some sweat and thought into your code – which is good. But it ended up piling up code, making it more messy as you went along. But don't worry, that's perfectly normal for beginners. I figured taking some complexity out of it is the right thing to do now.
I'm still trying to digest this, it makes total sense but there is quite a bit here I have never seen nor would have thought of.
Please do ask any questions you have. It's what we're here for!