the close parenthesis is there, why does it say it is missing the parenthesis?

Question

Why wouldn't this work? I'm not sure why it says there's a syntax error, it says missing a parenthesis for .append() when the ending parenthesis is clearly there (line 32).

I was told the backslash \ is used for line breaks in .append()

for(var i = 0; i < works.length; ++i) {
    $('#work').append('\
      <div class='col-sm'>\
        <img class='img-responsive' src='" + works[i] + "'>\
      </div>\
    ');              //THIS IS THE END PARENTHESIS FOR .APPEND()
  };

I expect the images in an array to be displayed in my webpage. The array is called 'works'.

try using ticks instead of quotes if you want multi line strings - ` (the thing left of the 1), also solves your unescaped quotes problem — Pete, Mar 26 '19 at 16:50
Just put it all on one line. You're not really improving readability all that much with those line continuation characters, and it makes it more difficult to maintain anyway. — Robert Harvey, Mar 26 '19 at 16:50

score 3 · Answer 1 · answered Mar 26 '19 at 17:02

If you are in a position to use ES6, the template literal is here to remove the complexity/annoyance of multi-line string escaping.

const works = ['http://placekitten.com/150/150', 'http://placekitten.com/200/200']

for (let i = 0; i < works.length; ++i) {
  $('#work').append(`
    <div class='col - sm '>
      <img class='img - responsive' src='${works[i]}' alt=''>
    </div>
  `);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="work"></div>

score 1 · Answer 2 · answered Mar 26 '19 at 16:58

Take a look at the syntax highlight, you're closing the quotes and the interpreter is reading variables next to your string literals therefore throwing syntax errors, I'd encourage you to use ES6 Template literals or pay close attention to how you are using single and double quotes

Try this

for(var i = 0; i < works.length; ++i) {
    $('#work').append(`
      <div class='col-sm'>
        <img class='img-responsive' src='${works[i]}>
      </div>
    `);              //THIS IS THE END PARENTHESIS FOR .APPEND()
};

Ryan Wilson · Accepted Answer · 2019-03-26T16:57:10.050

0

If you are using single quotes to enclose your appended string, you should use double quotes inside of those or you need to escape the other single quotes contained in the opening and closing single quotes, I would go with the latter way of doing it, and change to this:

$('#work').append('<div class="col-sm"><img class="img-responsive" src="' + works[i] + '"></div>');              //THIS IS THE END PARENTHESIS FOR .APPEND()

edited Mar 26 '19 at 16:57

answered Mar 26 '19 at 16:51

Ryan Wilson

10,223
2
21
40

1

Not the down vote, but the use of `\\` is for escaping the new line, which can be a valid approach. – Taplar Mar 26 '19 at 16:52
@Taplar Yeah, I realized that after I read a comment above and updated my answer, thanks for the information, I've never used that before, typically if I append to a string on multiple lines I just use the + sign at the end of a line – Ryan Wilson Mar 26 '19 at 16:54
https://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript – j08691 Mar 26 '19 at 16:56

the close parenthesis is there, why does it say it is missing the parenthesis?

3 Answers3