Javascript passing variable on as null?

Question

I honestly can't think of a better title, I'm new with writing my own javascript.

Basically, I have the following script which will translate a hex value to an rgb value:

$(".submit").click(function() {
    function hex2rgb(hex) {
        if (hex.length < 3) {
            $(".result").text("Error");
        }
        if (hex[0] == "#") {
            hex = hex.substr(1);
        }
        if (hex.length == 3) {
            var temp = hex;
            hex = '';
            temp = /^([a-f0-9])([a-f0-9])([a-f0-9])$/i.exec(temp).slice(1);
            for (var i = 0; i < 3; i++) hex += temp[i] + temp[i];
        }
        var triplets = /^([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i.exec(hex).slice(1);
        return {
            red: parseInt(triplets[0], 16),
            green: parseInt(triplets[1], 16),
            blue: parseInt(triplets[2], 16)
        }
    }
    var hex = $(".hex").val();
    var rgb = hex2rgb("#" + hex);
    $(".result").text("rgba(" + rgb.red + "," + rgb.green + "," + rgb.blue + ",1)");
});

_{Working example: http://jsfiddle.net/charlescarver/JkeKV/5/}

When the number of digits entered in the textbox is less than 3 (an incomplete hex code), it changes the text of .result to error. The code itself works fine, but the console is throwing up an error saying...

TypeError: 'null' is not an object (evaluating '/^([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i.exec(hex).slice')

I assumed that if the code was less than 3 digits, it would just display the error, not try to move on to if (hex.length == 3) {} function, which it seems like it is doing. Is any of this correct?

Also, would it be better to use if (hex.length == 3) {} or if (hex.length >= 3) { for the function that translates the hex to rgb? I'm only thinking this because the number of digits has to be 3 >= x <= 6?

why you checking for length == 3? just error if Hex length < 6 — yngccc
– yngccc, Commented Sep 1, 2012 at 2:23
Because the hex length could be 3, #333 would be the same as #333333. — Charlie
– Charlie, Commented Sep 1, 2012 at 3:35

João Silva · Accepted Answer · 2012-09-01 01:59:25Z

1

It will move to the next if statement because you are not returning from the function when there's an error:

if (hex.length < 3) {
  $(".result").text("Error");
  return;
}

An alternative is to use an else for the rest of your code that does pass that validation:

if (hex.length < 3) {
  $(".result").text("Error");
} else {
  if (hex[0] == "#") {
    // ...
}

With respect to your other question, I'd use if (hex.length >= 3 && hex.length <= 6) {} since as you said, you want to validate that 3 >= x <= 6.

edited Sep 1, 2012 at 1:59

answered Sep 1, 2012 at 1:52

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Charlie Over a year ago

It looks like it's moving on again from there, as I'm getting this error: TypeError: 'undefined' is not an object (evaluating 'rgb.red'). Updated fiddle: jsfiddle.net/charlescarver/JkeKV/6

João Silva Over a year ago

@Charlie: What input are you using? Do you accept #ffffff, or just #fff? Your regular expression only considers the former.

Charlie Over a year ago

I thought I was accepting both, I'm trying to figure out why I did that. Oh, I think I figured it out... It should be if (hex.length == 3) {} so that if it's 3 or more, it gets passed into the function, but if it's 6, it gets passed into the triplets function?

João Silva Over a year ago

@Charlie: Since you now do not return an object with the red property. You need to take that into account after invoking the hex2rgb function. Also, why do you always concatenate the # character if you remove it in the function?

João Silva Over a year ago

@Charlie: Here's a working example jsfiddle.net/JkeKV/7. I think it's what you want. Please let me know if you need some help understanding anything.

|

Collectives™ on Stack Overflow

Javascript passing variable on as null?

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related