How to deal with 3 times quotation marks in a onclick proberty of an element

user_15050668 0
Viewed 50

I have a little problem: In my project I tried to make a like button and defined a button attached to a function via onclick proberty. But now it looks like this:

<div class="post-container">
    <button class="{% if post.liked %}color-blue{% else %}color-white{% endif %}" id="post_{{ post.id|stringformat:'s' }}" onclick="postLike('{{ post.id|stringformat:'s' }}')"> {{ number_of_likes }} Like{{ number_of_likes|pluralize }}</button>
</div>

Visual Studio Code red-marks this and I am not really sure how to handle these this, since I am getting an error on onclick in the Console when I press the button...

html javascript
2 Answers

To deal with 3 times quotation marks you need to switch between single and double quotes. Try doing this:

onclick='postLike("{{ post.id|stringformat:'s' }}")'
user_77530890

Inline handlers like you're currently using are universally considered to be terrible practice, and one of the reasons for that is because they have very ugly quote escaping problems when passing string parameters. (They also require global pollution and have a demented scope chain.)

Put the post ID into a data attribute instead, and attach listeners to each element in standalone JavaScript elsewhere. For example, if you're starting with

<button class="myButton" onclick="postLike('{{ post.id|stringformat:'s' }}')">

change to

<button class="myButton" data-post-id="{{ post.id|stringformat:'s' }}">

and retrieve the post ID from the button when clicked. After the HTML contains all the buttons, run the following JS:

for (const button of document.querySelectorAll('.myButton')) {
  button.addEventListener('click', (e) => {
    postLike(e.target.dataset.postId);
  });
}

You will have to tweak the selector string .myButton depending on the HTML markup around your buttons.

Another option, using event delegation on a container of all the buttons:

container.addEventListener('click', (e) => {
  if (e.target.dataset.postId) {
    postLike(e.target.dataset.postId);
  }
});
user_95152070
Related