update: by deleting the space between the ma, I successfully got rid of one of the random equal signs/"s. However, it seems to be inserting " ="" " whenever there is a space in the string, which the user name returns(firstName lastName). Any idea why it would be doing that? And it also still inserts " ="" " right before ">join...", which is strange considering there is no space there.....

 $("#ride").append('<div class= "style"><img src = "'
                 + snapshot.val().id
                 + '" style="width:68px;height:68px;"/><p>' 
                 + snapshot.val().user 
                 + '</p><ul class = "styling"><li>'  
                 + snapshot.val().when 
                 + ' '
                 + snapshot.val().from 
                 + ' - ' 
                 + snapshot.val().to 
                 + '</li><li>' 
                 + snapshot.val()ments 
                 + '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"'  
                 + snapshot.val().user
                 + '\",\"'
                 + snapshot.val().reference 
                 + '\")\">join this ride</button></ul></div>');

I'm using jquery to write dynamic HTML content.

data.forEach(function(snapshot) {
     $("#ride").append('<div class= "style"><img src = "'
                 + snapshot.val().id
                 + '" style="width:68px;height:68px;"/><p>' 
                 + snapshot.val().user 
                 + '</p><ul class = "styling"><li>'  
                 + snapshot.val().when 
                 + ' '
                 + snapshot.val().from 
                 + ' - ' 
                 + snapshot.val().to 
                 + '</li><li>' 
                 + snapshot.val()ments 
                 + '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"' 
                 + snapshot.val().user 
                 + '\" , \"'
                 + snapshot.val().reference 
                 + '\")">join this ride</button></ul></div>');
             });

        console.log('ID : ' + $("#ride").html());
});

These are the divs created by my jquery code. Currently, I get a "Uncaught SyntaxError: Unexpected token }" message when I click either of the buttons in this div:

   <div class="style"><img src=".jpg" style="width:68px;height:68px;">
    <p>Liz</p>
    <ul class="styling">
        <li>Wed Mar 29 2017 07:00 AM - 09:00 PM</li>
        <li>test 2 </li><button type="button" class="btn btn-outline-info" onclick="initMessenger(" liz="" smith "=" " ,=" " "-kfsqld0eras9ri4v9es ")"="">join this ride</button></ul>
</div>
<div class="style"><img src=".jpg" style="width:68px;height:68px;">
    <p>Liz</p>
    <ul class="styling">
        <li>Thu Mar 23 2017 02:00 AM - 05:30 AM</li>
        <li>TEST THREE</li><button type="button" class="btn btn-outline-info" onclick="initMessenger(" liz="" smith "=" " ,=" " "-kfsvhs6q-x-bdhz8jfk ")"="">join this ride</button></ul>
</div>

Why does my initMessenger call all these random equal signs everywhere and added quotation marks? How do I get rid of them?

update: by deleting the space between the ma, I successfully got rid of one of the random equal signs/"s. However, it seems to be inserting " ="" " whenever there is a space in the string, which the user name returns(firstName lastName). Any idea why it would be doing that? And it also still inserts " ="" " right before ">join...", which is strange considering there is no space there.....

 $("#ride").append('<div class= "style"><img src = "'
                 + snapshot.val().id
                 + '" style="width:68px;height:68px;"/><p>' 
                 + snapshot.val().user 
                 + '</p><ul class = "styling"><li>'  
                 + snapshot.val().when 
                 + ' '
                 + snapshot.val().from 
                 + ' - ' 
                 + snapshot.val().to 
                 + '</li><li>' 
                 + snapshot.val().ments 
                 + '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"'  
                 + snapshot.val().user
                 + '\",\"'
                 + snapshot.val().reference 
                 + '\")\">join this ride</button></ul></div>');

I'm using jquery to write dynamic HTML content.

data.forEach(function(snapshot) {
     $("#ride").append('<div class= "style"><img src = "'
                 + snapshot.val().id
                 + '" style="width:68px;height:68px;"/><p>' 
                 + snapshot.val().user 
                 + '</p><ul class = "styling"><li>'  
                 + snapshot.val().when 
                 + ' '
                 + snapshot.val().from 
                 + ' - ' 
                 + snapshot.val().to 
                 + '</li><li>' 
                 + snapshot.val().ments 
                 + '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"' 
                 + snapshot.val().user 
                 + '\" , \"'
                 + snapshot.val().reference 
                 + '\")">join this ride</button></ul></div>');
             });

        console.log('ID : ' + $("#ride").html());
});

These are the divs created by my jquery code. Currently, I get a "Uncaught SyntaxError: Unexpected token }" message when I click either of the buttons in this div:

   <div class="style"><img src="https://lh3.googleusercontent./-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg" style="width:68px;height:68px;">
    <p>Liz</p>
    <ul class="styling">
        <li>Wed Mar 29 2017 07:00 AM - 09:00 PM</li>
        <li>test 2 </li><button type="button" class="btn btn-outline-info" onclick="initMessenger(" liz="" smith "=" " ,=" " "-kfsqld0eras9ri4v9es ")"="">join this ride</button></ul>
</div>
<div class="style"><img src="https://lh3.googleusercontent./-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg" style="width:68px;height:68px;">
    <p>Liz</p>
    <ul class="styling">
        <li>Thu Mar 23 2017 02:00 AM - 05:30 AM</li>
        <li>TEST THREE</li><button type="button" class="btn btn-outline-info" onclick="initMessenger(" liz="" smith "=" " ,=" " "-kfsvhs6q-x-bdhz8jfk ")"="">join this ride</button></ul>
</div>

Why does my initMessenger call all these random equal signs everywhere and added quotation marks? How do I get rid of them?

• javascript
• jquery
• html
• syntax
• syntax-error

• You need to make sure the double quotes are being escaped properly and the single quotes all match up. Specifically around initMessenger where they seem to be imbalanced. Also there's some issues with braces. You don't have any opening ones but two closing? – G0dsquad Commented Mar 23, 2017 at 14:09
• i accidentally left out the "data.forEach(function(snapshot) {", which explains the bonus closing braces. I get the same issues when I escape all of the double quotes. – maddie Commented Mar 23, 2017 at 14:22

2 Answers 2

To avoid the escape nightmare one might use new ES6 Template literals

Like so

$("#ride").append(`
<div class="style">
    <img src="${snapshot.val().id}" style="width:68px;height:68px;"/>
    <p>${snapshot.val().user}</p>
    <ul class="styling">
    <li>${snapshot.val().when} ${snapshot.val().from} - ${snapshot.val().to}</li>
    <li>snapshot.val().ments</li>
    <button type="button" class="btn btn-outline-info" onclick="initMessenger('${snapshot.val().user}','${snapshot.val().reference}')">join this ride</button>
    </ul>
</div>`);

Now there's no need to escape any characters, see for instance: onclick="initMessenger('${snapshot.val().user}','${snapshot.val().reference}')"

You seem to put an extra double quote here:

+ '\")">join this ride</button></ul></div>');

So it formed a following string:

onclick = "initMessenger("51234" , "997")">join this ride</button></ul></div>

(the numbers are just some random values)

And if you change your string to this:

+ '\")>join this ride</button></ul></div>');

The output would look like this and it should work just fine:

onclick = "initMessenger("51234" , "997")>join this ride</button></ul></div>