Question

Okay, so I wrote this just under a decade ago:

http://meyerweb.com/eric/tools/color-blend/

I’m pretty sure it worked okay at the time, but since then (or, who knows, maybe always) a bug has crept in. I can demonstrate it like so:

1. Stay in ‘hex’. Pick a couple of colors. Blend them.
2. Edit the hex colors with the keyboard (that is, type in new hex values, or alter the ones that are there). Blend again.
3. So far so good.
4. Switch the mode to “RGB”.
5. Edit one of the numbers.
6. Now nothing works—no blending, no type switching, nothing.

Why? I even can’t figure out where it’s failing.

(Yes, I know the JS is clumsy as hell and uses global variables and all kinds of ick. I do plan to rewrite it. But first I need to understand what’s going wrong here, and if at all possible how I should have diagnosed it myself. Please note that I just barely understand how to use, in a very basic way and probably not properly, the Firefox JS debugger.)

Answer 1

You need a case-insensitive switch on your regex in colorParse().

You .toUpperCase the color… so ‘rgb’ goes to ‘RGB’ but then your regex tries to replace lowercase ‘rgb’ which it can’t do.

col = c.replace(/[#rgb(]*/i, ”);

Notice the /i in the regex to make it case insensitive.