Javascript onclick function call issue: won't pass a string

Question

So the basic rundown is that I'm trying to create a rudimentary means of flagging inappropriate content on our web mapping application. Within a function that dynamically creates content for the sidebar of the webmap when the user clicks on a point I have this piece of code that should generate an image of a flag.

When the user clicks the flag, I want to run the function flagContent which should pass a url string into the function. From within this function I would then be able to write it to a database later on (though I haven't made it this far yet).

Here are some code snippets I have been working with.:

1.This is where the flag image is generated

content += "<p class='info'><img id='flag' onclick='flagContent(" + attachmentInfo.url + ")
'src='assets/flag.png' style='height:15px'>Flag as inappropriate...</p>";

This is the connected function

function flagContent(imageUrl){ console.log(imageUrl)}

So basically the url is a string and I'd like to be able to manipulate it within the flagContent function. Unfortunately I can't get it to work. When I pass a numerical parameter such as attachmentInfo.objectID I do not run into the same problem.

For what it's worth I also get this error:

Uncaught SyntaxError: Unexpected token :

Any help would be greatly appreciated. Let me know if there is additional information that could help to solve this. Thanks!

Is height:15px causing the issue? And flagContent('" + attachmentInfo.url + "') — hunter
– hunter, Commented Feb 4, 2013 at 20:39
Verify the HTML being generated. The string parameter of flagContent() must be quoted in Javascript, too. — devio
– devio, Commented Feb 4, 2013 at 20:39

Chris Barr · Accepted Answer · 2014-12-16 12:21:38Z

14

I'm assuming that attachmentInfo.url would return a URL, which should be a string and it just needs to be surrounded by quotes. Since you've already used both types of quotes, you will have to escape some quotes.

content += "<p class='info'>";
content += "<img id='flag' onclick=\"flagContent('" + attachmentInfo.url + "')\" src='file.png'/>";
content += "Flag as inappropriate...";
content += "</p>";

Doing this makes the final out put look like this:

<p class='info'>
  <img id="flag" onclick="flagContent('http://example.com')" src='file.png'/>
  Flag as inappropriate...
</p>

The problem you had was that the URL was not surrounded by quotes, and it saw flagContent(http://example.com) and didn't know what to do with those bare words not in a string.

edited Dec 16, 2014 at 12:21

answered Feb 4, 2013 at 20:39

Chris Barr

34.6k28 gold badges105 silver badges157 bronze badges

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

Collectives™ on Stack Overflow

Javascript onclick function call issue: won't pass a string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related