jQuery Variable with .css() concatenation issue?

Question

I am trying to change CSS of a button on blur. I suspect it might be a concatenation issue but am unable to figure out what I am doing wrong. Here is my code...

HTML

<input type="text" value="blue" id="textinput">
<button>Button</button>
<span id="color">red</span>

CSS

button {
 background-color:blue;
 background-image: -webkit-linear-gradient(top, white 0%, black 100%);    
}

jQuery

$("#textinput").blur(function () {
     setTimeout(function () {
          endColor = $("#textinput").val();
          $('button').css({ 
              'background-color' : endColor
              'background-image' : '-webkit-linear-gradient(top, #309ACB 0%,' + endColor + '100%)'       });
     }, 500);
});

FIDDLE LINK

http://jsfiddle.net/krishollenbeck/p2jah/20/

It works fine when I remove the gradient CSS. So I am guessing I am concatenating the variable wrong. However I have tried it multiple ways but just can't seem to figure it out. It is probably something really obvious.

Also note. I am using webkit gradient so test in chrome or safari. Thanks in advance for the help.

score 6 · Accepted Answer · edited May 23 '17 at 11:52

6

You are missing a whitespace between your variable holding the color and the percentage string.

'-webkit-linear-gradient(top, #309ACB 0%,' + endColor + ' 100%)'
                                                        ^
                                                        |
                                                        +-- Here

A good way to debug this kind of situations is to use console.log to see the result of the concatenated string. In this case, for example, you'd get red100% instead of red 100%.

An alternative, which imho, is less error-prone, is to use String.format(). This way, you can (more) clearly see if you are missing something:

'-webkit-linear-gradient(top, #309ACB 0%, {0} 100%)'.format(endColor)

_{Note that some browsers don't support this function, but you can use this pollyfill to define it.}

edited May 23 '17 at 11:52

Community

1
1

answered Aug 30 '12 at 19:36

João Silva

89,303
29
152
158

1

Yep that is what it was. I have been looking at this for a good half hour and didn't pick that up. Sometimes it just takes a second pair of eyes. Thanks a lot. – khollenbeck Aug 30 '12 at 19:41
1

@KrisHollenbeck: You're welcome. An alternative, which is less error-prone, is to use `format`. For example: `'-webkit-linear-gradient(top, #309ACB 0%, {0} 100%)'.format("red")`. This way, you can easily see where the spaces are. – João Silva Aug 30 '12 at 19:42
I have never used .format() before.. Thanks for the info. I didn't even know that was part of the jQuery library. – khollenbeck Aug 30 '12 at 19:44
It's not. It's pure JavaScript, although some browsers don't support it. However, you can easily create it http://stackoverflow.com/a/1038930/140816. – João Silva Aug 30 '12 at 19:46

Steve Robbins · Answer 2 · 2013-04-11T06:39:45.220

5

You're missing a comma, and space (see Joao's answer)

$("#textinput").blur(function () {
     setTimeout(function () {
          endColor = $("#textinput").val();
          $('button').css({ 
              'background-color' : endColor, // < here        -> this way too               v here
              'background-image' : '-webkit-linear-gradient(top, #309ACB 0%,' + endColor + ' 100%)'       });
     }, 500);
});

edited Apr 11 '13 at 06:39

answered Aug 30 '12 at 19:37

Steve Robbins

13,672
12
76
124

Thanks.. I acutally had the comma in there before. That was a copy mistake on my part. I forgot to add it back in when messing around in my fiddle. However the whitespace is what was actually causing the problem... – khollenbeck Aug 30 '12 at 19:40

jQuery Variable with .css() concatenation issue?

2 Answers2