Illegal error when trying to append

Question

My question is, I'm attempting to append something I saw in a tutorial for making rainbow text to head, as I'm trying add it to the custom color codes in a nodejs based chat. I'm getting "SyntaxError: Unexpected token ILLEGAL" message in console. Can someone tell me what my errors are or possibly fix it for me? Thanks in advance.

$('head').append('<style> #chat .rainbow { background-image: -webkit-gradient( linear,     left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f),  color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9,  #ff2), color-stop(1, #f22) )!important;
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,  #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent!important;
  -webkit-background-clip: text!important;
  background-clip: text!important; } </style>')

you need to watch for linebreaks in strings: http://stackoverflow.com/questions/508269/how-do-i-break-a-string-across-more-than-one-line-of-code-in-javascript — lordvlad, Jul 11 '14 at 08:01
Thanks everyone who answered, it works now. I've haven't used append before and was trying to just directly copy paste the CSS. The line breaks worked. — Taylor D Wright, Jul 11 '14 at 08:08

score 1 · Answer 1 · answered Jul 11 '14 at 07:59

Try:

$('head').append('<style> #chat .rainbow { background-image: -webkit-gradient( linear,     left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f),  color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9,  #ff2), color-stop(1, #f22) )!important; \
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,  #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); \
  color:transparent!important; \
  -webkit-background-clip: text!important; \
  background-clip: text!important; } </style>');

Adding a backslash at the end of each line tells the JavaScript engine that the string will continue to the next line, thus avoiding the automatic semicolon insertion annoyance.

Why should the OP try that? – Felix Kling Jul 11 '14 at 08:00 — Felix Kling, Jul 11 '14 at 08:00
@FelixKling Explanation added. Thanks – Mihai Matei Jul 11 '14 at 08:03 — Mihai Matei, Jul 11 '14 at 08:03

score 1 · Answer 2 · answered Jul 11 '14 at 08:00

Try putting it all in one line.

$('head').append('<style> #chat .rainbow { background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9,  #ff2), color-stop(1, #f22) )!important; background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,  #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent!important;-webkit-background-clip: text!important; background-clip: text!important; } </style>');

I'm afraid you can't just start new lines in JavaScript.

Why should the OP try that? – Felix Kling Jul 11 '14 at 08:01 — Felix Kling, Jul 11 '14 at 08:01

score 0 · Answer 3 · answered Jul 11 '14 at 08:01

With multiple strings:

$('head').append('<style> #chat .rainbow { background-image: -webkit-gradient( linear,     left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f),  color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9,  #ff2), color-stop(1, #f22) )!important;' +
'background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,  #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );' +
'color:transparent!important;' +
'-webkit-background-clip: text!important;' +
'background-clip: text!important; } </style>');

score 0 · Answer 4 · answered Jul 11 '14 at 08:02

You need to put it on one line as javascript String literals can't span multiple lines by default. This can be resolved by adding \ at the end, or concatinating the String (or just doing multiple appends, but that makes less sense in this scenario as it's a whole style tag that's being added).

Illegal error when trying to append

4 Answers4