CODEWITHSUNDEEP
javascripthtmlcss
Taylor D Wright
Taylor D Wright

Reputation: 11

Illegal error when trying to append

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>')

Upvotes: 0

Views: 67

Answers (4)

Simon Verhoeven
Simon Verhoeven

Reputation: 1323

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).

Upvotes: 0

Oliboy50
Oliboy50

Reputation: 2721

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>');

Upvotes: 0

AndrewPolland
AndrewPolland

Reputation: 3071

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.

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

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.

Upvotes: 1

Related Questions