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 — Heretic Monkey
– Heretic Monkey, Commented May 12, 2020 at 19:19
Does this answer your question? passing quotes to an onclick event within an html element within a javascript function — Heretic Monkey
– Heretic Monkey, Commented May 12, 2020 at 19:25

Jawad Khan · Accepted Answer · 2020-05-13 12:05:00Z

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>

Dr. Acula · Accepted Answer · 2020-05-12 19:08:20Z

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, 2020 at 19:08

Dr. Acula

4896 silver badges14 bronze badges

1 Comment

epascarello Over a year ago

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.

Brian Patterson · Accepted Answer · 2020-05-12 19:21:24Z

0

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+"')\"

edited May 12, 2020 at 19:21

answered May 12, 2020 at 19:15

Brian Patterson

1,6252 gold badges16 silver badges31 bronze badges

Comments

Fareed Khan · Accepted Answer · 2020-05-12 19:25:43Z

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, 2020 at 19:25

Fareed Khan

2,9431 gold badge14 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to pass JavaScript arguments using inner HTML

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related