This page was inspired by the fun quizzes on BuzzFeed. I wanted to learn more about checkboxes. BuzzFeed lets you click on the checkbox or the entire div to select an option. I thought this would be easy to do, just trigger a click on the input element when the parent div is clicked, right? The problem was that the box was checked if you clicked on the parent div, but not if you clicked on the checkbox itself! Why was this happening?
The problem was that the parent div and the input element had a handler for the same event. When you clicked on the checkbox, the click handler for the parent div was triggered as well, resulting in a “double click.” The result is the box is not checked at all since you checked and then unchecked it. Because a click handler was defined for the parent div, any child element event handler will bubble up and trigger the event handler.
I solved this problem by attaching click handlers to the poster image and the input elements. Since the poster images are not parents of the input elements, you do not get the ‘bubbling up’ to the parent. Another way to prevent this would be to use event.stopPropagation(), which will keep parent event handlers from being triggered.
The funnest part of this page was writing the different movie results. Choose different movies and see what you get!
Day 49 – Buzz Quiz