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>";

1. 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!

Answer 1

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.