CODEWITHSUNDEEP
javascriptcss
MarksCode
MarksCode

Reputation: 8604

Multiline string, invalid or unexpected token

I'm trying to add css to my page dynamically by building a css string that will be appended to the document's head. Since this string is long I want to break it up into multiple lines in my editor, so I do the following:

function generateCss(colors){
    var cssString = "* {margin: 0;padding: 0;} \ 
        #mainWrapper {width: 100vw;height: 100vh;background-color:#"+ colors['background'] + ";} \
        #mainWrapper div {height: 2vw;} \
        .cell {width: 2vw;background-color:#"+ colors['color1'] + ";display: inline-block;} \
        .active {background-color:#"+ colors['color2'] +" !important;}";
    console.log(cssString);
}

However, on the line where I create the cssString I get error: Uncaught SyntaxError: Invalid or unexpected token. Can anybody please help me figure out what I'm doing wrong?

This is a picture of my IDE for syntax highlighting reference:

IDE

Upvotes: 0

Views: 1667

Answers (2)

Vladimir M
Vladimir M

Reputation: 4489

var cssString = "* {margin: 0;padding: 0;} \

Note that you have an extra space at the end of the string. This causes the problem.

P.S. as a side note, it might be good to take in use something different then escaping, as stated in the following question:

Creating multiline strings in JavaScript

Upvotes: 3

Phi Nguyen
Phi Nguyen

Reputation: 3056

try this : 

function generateCss(colors){
    var cssString = `* {margin: 0;padding: 0;}
        #mainWrapper {width: 100vw;height: 100vh;background-color:#${colors['background']};}
        #mainWrapper div {height: 2vw;}
        .cell {width: 2vw;background-color:#${colors['color1']};display: inline-block;}
        .active {background-color:#${colors['color2']}!important;}`;
    console.log(cssString);
}

Upvotes: 1

Related Questions