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

Question

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>

change code with $("#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>"); — KBell
– KBell, Commented Sep 26, 2019 at 7:44
Please try to code it correctly! you are not placed the quotes properly. — Sanjun Dev
– Sanjun Dev, Commented Sep 26, 2019 at 8:00
You might want to consider closing the <b>-tag. Some unclosed tags continue even outside their parent containers and could cause headache later. — riesa
– riesa, Commented Sep 26, 2019 at 8:01

zmag · Accepted Answer · 2019-09-26 10:46:21Z

4

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>

edited Sep 26, 2019 at 10:46

answered Sep 26, 2019 at 7:42

zmag

8,27112 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Lee Over a year ago

Unfortunately this doesn't give the correct result.

Azhar Rasheed · Accepted Answer · 2019-09-26 08:03:50Z

0

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>");

answered Sep 26, 2019 at 8:03

Azhar Rasheed

1586 bronze badges

Comments

Icewine · Accepted Answer · 2019-09-26 08:27:26Z

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>

riesa · Accepted Answer · 2019-09-26 11:35:13Z

0

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>
`)

edited Sep 26, 2019 at 11:35

answered Sep 26, 2019 at 7:57

riesa

1662 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related