How to pass JavaScript arguments using inner HTML

Question

I am new to JavaScript and I am currently stuck on an issue. Basically, I using an API to search for anime, get the html image, synopsis, and name and put them in a table. That works fine. What I am trying to do is add an onlick for each name in the table to perform a function using the name of the anime as an argument. I have tried using "\'", the escape character, and it didn't work. Here is my code for each row:

nameAndSynopsis.innerHTML = "<table style='border: 1px solid black'><tr><td style='color:blue' onclick='getEpisodes(\'" + anime_name + "\')'>" + anime_name + "</td></tr><br><br><br><tr><td>" + anime_synopsis + "</td></tr></table>";`

When I run my code, the console says Unexpected end of input and here are the results from the source tab when I use inspect on my web page

`getEpisodes(`

Any help would be greatly appreciated.

Don't use `onclick`. Use `addEventListener` to attach the event listener outside of HTML. See [addEventListener vs onclick](https://stackoverflow.com/q/6348494/215552) — Heretic Monkey, May 12 '20 at 19:19
Does this answer your question? [passing quotes to an onclick event within an html element within a javascript function](https://stackoverflow.com/questions/11126603/passing-quotes-to-an-onclick-event-within-an-html-element-within-a-javascript-fu) — Heretic Monkey, May 12 '20 at 19:25

score 1 · Answer 1 · edited May 13 '20 at 12:05

If you have to use quotes, here how you will do it:

var functionname = "getEpisodes('" + anime_name + "')";
nameAndSynopsis.innerHTML = '<table style="border: 1px solid black"><tr><td style="color:blue" onclick="' +functionname+ '">' + anime_name + '</td></tr><br><br><br><tr><td>' + anime_synopsis + '</td></tr></table>';

I have added functionname in separate line to simply it. It can be done in single line as well.

<div id="nameAndSynopsis"></div>

<script>
  function getEpisodes(something) {
    console.log("ok.........");
  }
  var nameAndSynopsis = document.getElementById("nameAndSynopsis");
  var anime_name = "anime_name";
  var anime_synopsis = "anime_synopsis";
  var functionname = "getEpisodes('" + anime_name + "')";
  nameAndSynopsis.innerHTML = '<table style="border: 1px solid black"><tr><td style="color:blue" onclick="' + functionname + '">' + anime_name + '</td></tr><br><br><br><tr><td>' + anime_synopsis + '</td></tr></table>';
</script>

score 0 · Accepted Answer · answered May 12 '20 at 19:08

0

Try using template literals instead of all the quotes like this.

nameAndSynopsis.innerHTML = `<table style='border: 1px solid black'><tr><td style='color:blue' onclick=getEpisodes(${anime_name})> ${anime_name} </td></tr><br><br><br><tr><td>${anime_synopsis}</td></tr></table>`

answered May 12 '20 at 19:08

Dr. Acula

469
6
13

Not sure how `onclick=getEpisodes(${anime_name})` would work unless it is a number. If it is a string, `onclick=getEpisodes(abcdef)` would throw an error. – epascarello May 12 '20 at 20:38

Brian Patterson · Answer 3 · 2020-05-12T19:21:24.143

You are using single-quote around the attribute value onclick=' <-- '

Then you are escaping the single quote, so it comes out like this ..

onclick='getEpisodes('yourAnimeName')'

Which sets your onclick attribute to getEpisodes(

This may not make sense and you may be asking, how does it end up like that, didn't i just ESCAPE those quotes?

Well, yes and no, you escaped them in the current javascript context. But since that is then inserted into the DOM as html, the html parser won't see those single-quotes as being escaped.

Try using double-quotes instead.

onclick='getEpisodes(\""+anime_name+"\")'

or

onclick=\"getEpisodes('"+anime_name+"')\"

score 0 · Answer 4 · answered May 12 '20 at 19:25

0

Your code is ending with an unkown string there, right at the end

</table>";`  <---- remove this last string

It should be ending like this

 </table>";

answered May 12 '20 at 19:25

Fareed Khan

2,613
1
11
19

How to pass JavaScript arguments using inner HTML

4 Answers4

Linked