Backslashes in jQuery Error "Unexpected token ILLEGAL"

Question

I just can't get my code to work. I want to append a multiline String to my body using jQuery. But when I define the string using a backslash for each line break, I get "Unexpected token ILLEGAL" Error. What am I doing wrong? My Code:

    var first = true;

function showPopup(text, title) {

    //Fügt HTML und CSS für Popup-Box zum Body des HTML Dokumentes hinzu.
    if (first) {

        var string1 = '<div id="popup">\
        <div id="content">\
            <div id="title"></div>\
            <div id="text"></div>\
        </div>\
        <a href="javascript:togglePop()"><div id="popup_button"><i class="fa fa-times"></i> Schließen</div></a>\
        </div>\

    <div id="popoverlay"></div>';

In the line below is the first error:

        var string2 = '<style>\
    #popup{\
    width: 50%;\
    transform: translate(-50%, -50%);\
    position: fixed;\
    left: 50%;\
    top:   50%;\
    background-color: white;\
    color: black;\
    z-index: 1000;\
    box-shadow: 2px 2px 10px black;\
    display: none;\

}\

#popup #content{\
    padding: 20px;\
}\

#popup #title{\
    font-weight: bold;\
    font-size: 110%;\
}\

#popup_button{\
    text-align: center;\
    padding: 10px 0px;\
    color: #790300;\
    cursor: pointer;\
    transition-duration: 0.25s;\
}\

#popup_button:hover{\
    transition-duration: 0.25s;\
    background-color: #EDEDED;\
}\

#popup a{\
    text-decoration: none;\
}\

#popoverlay{\
    display: none;\
    background-color: black;\
    position: fixed;\
    top: 0%;\
    left: 0%;\
    width: 100%;\
    height: 100%;\
    z-index: 100;\
    opacity: 0.7\
}\
</style>';

        $("body").append(string1);
        $("body").append(string2);


        first = false;

    }

    //Setzt den Titel und den Text der Popup-Box.
    $("#popup #text").innerHTML = text;
    $("#popup #title").innerHTML = title;

    //Öffnet die Box
    togglePop();

}

So, what I am doing wrong? I would be grateful for help.

score 4 · Accepted Answer · answered Dec 04 '14 at 19:17

4

Empty lines have to be escaped as well:

a = 'Hello\

World!' # WRONG!


a = 'Hello\
\
World!' # Correct.

answered Dec 04 '14 at 19:17

Andrew Dunai

3,061
19
27

@HansMu158 Here's a related question with some nice tricks for multi-line strings in JS: http://stackoverflow.com/a/805755/3455614 – Andrew Dunai Dec 04 '14 at 19:20

Backslashes in jQuery Error "Unexpected token ILLEGAL"

1 Answers1