Calling a method while setting innerHTML of an element

Question

I am struggling with calling a method while setting innerHTML. I apologize if there is a straightforward answer I have overlooked, but at the moment I am stuck.

Se the code below:

"<a href='#' onclick='removeEntry('" + element.id + "')'><span class='fa fa-times'></span></a>"

You can see that there's a mess regarding the quotes. Is there a third way to type quotes or something of the kind that can allow me to call "removeEntry(element.id)"? I need quotes around element.id in order to call removeEntry. Any suggestions on how to solve this in a different way?

Sir McPotato · Accepted Answer · 2017-02-06T10:36:42.657

You should replace

"<a href='#' onclick='removeEntry('" + element.id + "')'></a>"

with

"<a href='#' onclick='removeEntry(\"" + element.id + "\")'></a>"

In fact, the problem is with you current code, the a tag onclick property will be looking like onclick='removeEntry('myId')'

Note there's imbricated simple quotes, breaking your function call. Replace the id simple quotes by escaped double quotes , and it'll give you onclick='removeEntry("myId")' that is fine :)

Edit : Anyway, if you're targeting recent browser, you could try ES6 template literals, that will give you the following line :

var html = `<a href="#" onclick="removeEntry('${element.id}')"></a>`;

This helps to avoid struggling with your quotes. Note that the variable inclusion in the template literal looks like PHP do.

It works! Thank you for sparing me more headaches. Escaping quotes is new to me, but I'll definitely remember it from now on :) — , Feb 06 '17 at 10:34
@Tøffelen You're welcome! Check the edit, it might help you if you can use ES6 template literals :) — Sir McPotato, Feb 06 '17 at 10:38

Lokesh Gamot · Answer 2 · 2017-02-10T11:06:07.830

0

'<a href="#" onclick="removeEntry(' + element.id + ')">
   <span class="fa fa-times"></span>
</a>'

This should work out. You can encode double quotes in single quotes and you want this whole expression as a string.so a string with variable can be written as string1 = string2 + variable +string3;

Or for a multi lines string in JavaScript you can use back ticks.

`<a href="#" onclick="removeEntry(' + element.id + ')">
       <span class="fa fa-times"></span>
 </a>`

edited Feb 10 '17 at 11:06

answered Feb 06 '17 at 10:35

Lokesh Gamot

48
4

Please include some explanation as to why this might solve op's problem – milo526 Feb 06 '17 at 10:42
Also remember the hapiness of defining [multiple-lines strings](http://stackoverflow.com/a/805113/2435443) on JS. – Sir McPotato Feb 06 '17 at 13:52

score 0 · Answer 3 · answered Feb 06 '17 at 10:36

This:

"<a href='#' onclick='removeEntry('" + element.id + "')'><span class='fa fa-times'></span></a>"

will create an element like this:

<a href='#' onclick='removeEntry('someId')'><span class='fa fa-times'></span></a>

Which is not correct. What you need to do is to either:

Use the other quotes " (but you have to escape them):

like this:

"<a href='#' onclick='removeEntry(\"" + element.id + "\")'><span class='fa fa-times'></span></a>"

to create an element like this:

<a href='#' onclick='removeEntry("someId")'><span class='fa fa-times'></span></a>

Or Add a backslash \ to the ' quotes (you have to escape the backslashes as well):

like this:

"<a href='#' onclick='removeEntry(\\'" + element.id + "\\')'><span class='fa fa-times'></span></a>"

to create an element like this:

<a href='#' onclick='removeEntry(\'someId\')'><span class='fa fa-times'></span></a>

Calling a method while setting innerHTML of an element

3 Answers3