Calling a Javascript function with parameters from innerHTML

Question

I'm writing html in Javascript using innerHTML, in one case, I'm appending a href tag like so :

txt.innerHTML += '<a href="" id="rssLinks" onclick="goToUrl(' + url + ');">Read more</a>';

where url is a string containing a url.

And the goToUrl function looks like as follows :

    function goToUrl(urlToBrowse) {
       window.open(urlToBrowse, "_blank");
    }

But my onclick never gets called, can anyone see the problem? Cheers

hint: alert your string.

georg
– georg

2014-02-12 10:45:04 +00:00
Commented Feb 12, 2014 at 10:45 — georg
– georg, Commented Feb 12, 2014 at 10:45

Dwza · Accepted Answer · 2020-01-28 13:49:36Z

4

try this

txt.innerHTML += "<a href='' id='rssLinks' onclick='alert(\"" + url + "\");'>Read more</a>";
//........................................................^............^ 
//.............................................................may needed

because call would look like goToUrl(http://google.com)

and that's a string so it has to be goToUrl("http://google.com")

EDIT 01/2020 - "New" way to add this parameter

Since ES6, you can write it with a Template-String

txt.innerHTML += `<a href='' id='rssLinks' onclick='goToUrl("${url}");'>Read more</a>`

edited Jan 28, 2020 at 13:49

answered Feb 12, 2014 at 10:44

Dwza

6,5657 gold badges45 silver badges79 bronze badges

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

5 Comments

MattTheHack Over a year ago

Hi, I'm trying this, but I have a problem, I alerted my string before quotes, and it looks like as follows : goToUrl(test.com/content......); and then after I tried to add the surrounding strings as you showed, it looks like this : goToUrl("http:="" www.test.com="" content="" ....);

MattTheHack Over a year ago

I tried with turned quotes but the url still becomes malformed

Dwza Over a year ago

now... :D try and error but this should work now! ^^

MattTheHack Over a year ago

Hi, just one more small problem - it looks fine in the alert, but now there are html "&quot" surrounding the link and my function doesn't get called

Dwza Over a year ago

guess you have a function like php htmlentities ? may innerHTML forms it like this...

JohnnyJS · Accepted Answer · 2014-02-12 10:44:30Z

0

Change to this:

onclick="goToUrl(' + url + '); return false;"

That will prevent the action of the browser.

answered Feb 12, 2014 at 10:44

JohnnyJS

1,49213 silver badges24 bronze badges

Comments

Jacob · Accepted Answer · 2014-02-12 10:44:53Z

0

You need to append onclick to your element txt.onclick="goToUrl(' + url + ');

answered Feb 12, 2014 at 10:44

Jacob

4,07124 gold badges92 silver badges151 bronze badges

Collectives™ on Stack Overflow

Calling a Javascript function with parameters from innerHTML

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related