CODEWITHSUNDEEP
javascripthtml
Adam Lee
Adam Lee

Reputation: 576

HTML+JavaScript: Can't add multiple parameters to onclick despite using escaped quotes

I am trying to append an HTML div with multiple parameters in the onclick function. Even though I am using escape quotes, the HTML is not rendered properly.

This is my HTML:

$("#city-list").append("<div class='user-panel' id='" + user.id + 'onclick=\'openChat(\'' + user.id + '\',\'' + user.username + '\',\'' + user.sex + "\'\")><b>" + user.username + ", " + "(" + user.sex + ", " + user.age + ")</div>");

This is what is rendered:

<div class="user-panel" id="A61o-ko0zVVJaxTbAAAHonclick=" openchat('a61o-ko0zvvjaxtbaaah','adamlee','male'")=""><b>adamlee, (male, 17)</b></div>

Upvotes: 0

Views: 112

Answers (4)

riesa
riesa

Reputation: 166

If you do not need to support IE you might want to consider using back-ticks (`) in this case. They provide functionality, a more readable experience and are less error prone. More information here MDN documentation for template literals.

Your example with back-ticks would be:

$("#city-list").append(`
    <div class="user-panel"
         id="${user.id}"
         onclick="openChat('${user.id}', ${user.username}, ${user.sex})">
         <b>${user.username}, (${user.sex}, ${user.age})
    </div>
`)

Upvotes: 0

zmag
zmag

Reputation: 8241

You missed closing quote for id attribute and function in onclick should have double quote because single quotes are used in it.

const user ={id: 'a61o-ko0zvvjaxtbaaah', username: 'henryzhu', sex: 'male', age: 17 }

$("#city-list").append("<div class='user-panel' id='" + user.id + '\' onclick="openChat(\'' + user.id + '\',\'' + user.username + '\',\'' + user.sex + "')\"><b>" + user.username + ", " + "(" + user.sex + ", " + user.age + ")</div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="city-list"></div>

Upvotes: 4

Icewine
Icewine

Reputation: 1851

If you are already using jQuery why not use a jQuery on click function?

Not saying it is wrong to use onclick inline but if you were curious this is another way you could achieve what you are going for.

// Add some data
var user = ({
  "id":"a61o-ko0zvvjaxtbaaah",
  "username":"henryzhu",
  "sex":"male",
  "age":"17"
  });
  
var content = "";

// Set up your data in data-attributes
content += "<div class='user-panel'         \
            data-id='" + user.id + "'       \
            data-username='" + user.username + "' \
            data-sex='" + user.sex + "'      \
            data-age='" + user.age + "'>";   

// viewable text
content += "<b>" + user.username + ", (" + user.sex + ", " + user.age + ")";
content += "</div>";

$("#city-list").append(content);
//---------------------------------------------------------------------

// jQuery on click function to call the openChat
// putting the data you need in data attributes let you grab what you need on the clicked name and
// submit it to the chat funciton.
$("body").on("click", ".user-panel", function(){
  var userid = $(this).attr("data-id");
  var username = $(this).attr("data-username");
  var sex = $(this).attr("data-sex");
  var age = $(this).attr("data-age");
  openChat(userid , username , sex);
});

// Your chat function
function openChat(id, name, sex){
  console.log(id + " | " + name + " | " + sex);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="city-list"></div>

Upvotes: 0

Azhar Rasheed
Azhar Rasheed

Reputation: 158

You can use this code to work on all browsers, just need to use quotations properly as used in below code:

$("#city-list").append("<div class='user-panel' id='" + user.id + "' onclick='openChat(\"" + user.id + "\", \"" + user.username + "\", \"" + user.sex + "\")'><b>" + user.username + ", (" + user.sex + ", " + user.age + ")</b></div>");

Upvotes: 0

Related Questions