- use stopPropagation to prevent event handlers from bubbling up
You've been hired to fix some major issues with a traffic light. Your job is to modify the existing code to make sure that the events firing on the page are only firing them you want them to.
Open up index.html
in the browser. You should see the outline of 3 traffic lights. When you click on the body of any of the lights, the background of the fixture should turn purple. When you click it again, it should turn white.
When you click on one of the lights, like the top light of the first fixture, the light turns red, but the body turns purple. Click around a bit and take a look at the behavior of the lights.
Ideally, we want to be able to click on the lights and only have that specific light change value. Your job is to edit the code in js/script.js
to fix up the existing code.
Currently, three tests fail. These tests check to see that the click event on the light fixture isn't fired when you click on an individual light. You'll want to make sure to pass all the tests.
View Stop Propogation Lab on Learn.co and start learning to code for free.
View Stop Propogation Lab on Learn.co and start learning to code for free.