Your approach doesn’t work because the default state of the little badges are to have the blue background. Basically, what you’re doing in those two extra lines is adding a blue background to something that already has a blue background. In addition, once you’ve set it to blue, if the numbers return to 0 you’ve got nothing that sets them back to gray. That’s the pure logic of it, but also lc
and rc
are jQuery objects and not DOM objects, so you set CSS properties with .css(property, value)
and not with .style
.
If you want to solve them with that approach, you can do something like this (or literally this):
lc.css('background-color', lessons > 0 ? '#6cf' : ' #ccc');
rc.css('background-color', reviews > 0 ? '#6cf' : ' #ccc');
You also need to change a couple of earlier lines (the ones with “append”) so lc
and rc
get set even initially, since they’re undefined when first adding the elements - it looks like this:
lc = $('<span id="lesson_count" class="dashboard_bubble">'+lessons+'</span>').appendTo('.wanikani-app-nav > ul > li:contains("Lessons")');
rc = $('<span id="review_count" class="dashboard_bubble">'+reviews+'</span>').appendTo('.wanikani-app-nav > ul > li:contains("Reviews")');
Personally I think I’d have the colors in the CSS in the initial style tag, and either have a zero
class or even have the number of lessons and reviews in a data-number
attribute with the actual numbers displayed being in a pseudo-element with content: attr(data-number);
… but that’s the “separate style, content, and logic” web developer in me talking. 