Spent two whole days trying to get a simple button to change color on click

I was following a basic JavaScript tutorial last week, building a little counter app. The numbers worked fine, but I wanted the button to flash green when you clicked it. I wrote the event listener, set the style.backgroundColor, nothing. Checked the console, no errors. I must have rewritten that function ten times, checked for typos, even restarted my computer. Turns out I had a separate CSS rule with '!important' on the button color from an old test, so my JavaScript change was being ignored. Two days of my life for a tiny CSS override. It's funny how the smallest things can eat up so much time when you're starting out. Has anyone else gotten stuck on a silly CSS vs JavaScript conflict like that?

3 comments

3 Comments

the_faith7d agoMost Upvoted

Ever feel like !important is the most ironic CSS rule?

riley_miller257d ago

It's the most honest rule we have, @the_faith. It just admits the whole cascade is a polite suggestion.

rileyb615d ago

Remember when we used to just call it yelling at the browser? Now it's a whole rule. It's like writing a polite note and then scribbling "BUT SERIOUSLY DO THIS" over it in sharpie. The cascade feels less like a suggestion and more like a list of things we tried before giving up.