Passing a variable to a Javascript function - syntax?

Question

I'm aware there are plenty of similar questions here, and even one of my own touches on this in a way - but I'm struggling with this particular code, and as a JS newbie, I can't figure out where I'm going wrong with it.

I'm basically adapting TinyMCE to get rid of the popup dialogs (replacing them with my own, to keep it clean). The one I'm working on right now is inserting images. Here's my function as it is now;

<script type="text/javascript">
function addImage(imgurl){
tinyMCE.execCommand('mceInsertContent',false,'<img src=" +imgurl+ " style="float:left; margin: 0    5px 5px 0;" />');
}
</script>

And the link

<a href="javascript:;" onclick="addImage('/myimage.jpg');return false;">[Insert Image]</a>

The function 'works' in that it inserts the code, but the 'imgurl' (myimage.jpg, in this example) isn't being passed - instead of /myimage.jpg being inserted, its inserting +imgurl+.

Pointers much appreciated from this newbie!

You have plenty of correct answers already, but one useful tip for you would be to look carefully at the syntax highlighting in your editor. For example if you paste your function into the JavaScript box at jsfiddle.net, you will see that the word imageurl is the same color as the rest of the string (meaning it is part of the string). When you make the fix, it becomes blue, showing you that it is a variable. See jsfiddle.net/rtoal/D9Z5C — Ray Toal
– Ray Toal, Commented Aug 25, 2012 at 13:58

jeremy · Accepted Answer · 2012-08-25 19:35:30Z

3

Your concatenation isn't right... When opening with single quotes, concat with single quotes. When with double quotes, use double quotes.

function addImage(imgurl){
     tinyMCE.execCommand('mceInsertContent',false,'<img src="'+imgurl+'" style="float:left; margin: 0 5px 5px 0;" />');
}

You can find tons of easy tutorials that explain concatenation in-depth. The general rule is to be consistent. If you wrap your string around double quotes, single quotes won't stop the parsing of a string because the compiler recognized double quotes to do this. The same goes with single quotes. The code below will parse Hello'; // broken string as the string just as concatenating using the wrong quote will also.

var string = "Hello'; // broken string

A good way to avoid problems like these (because even expert programmers still get syntax errors every once in a while) is to use a good programming editor (notepad++, sublime 2, coda, textmate, phpad) that has syntax highlighting. Even the simple highlighter that stackoverflow.com has is sufficient. Just by looking at the code above, you can tell that everything after the double quote (") is still parsed as a string as it is still the same color as the string, while a variable would change colors when put through a syntax highlighter.

edited Aug 25, 2012 at 19:35

answered Aug 25, 2012 at 13:53

jeremy

10.1k4 gold badges42 silver badges61 bronze badges

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

2 Comments

jeremy Over a year ago

Fixed at least, but it really wasn't the question. If I could, I'd give the img a class then use a style element to properly style it instead of using inline styling... but that wasn't the question.

Lee Over a year ago

Thanks @Nile - that has solved it. The reason for not using css is because the code is being placed in a wysiwyg editor.

João Silva · Accepted Answer · 2012-08-25 13:52:22Z

1

You're passing the variable just fine. The problem is that are you are not concatenating its value, but a string with the value +imgurl+. Use the following instead (note the closing and starting ' just before and after + imgurl +:

tinyMCE.execCommand('mceInsertContent',false,'<img src="' +imgurl+ '" style="float:left; margin: 0    5px 5px 0;" />');

answered Aug 25, 2012 at 13:52

João Silva

91.9k29 gold badges156 silver badges158 bronze badges

Comments

David G · Accepted Answer · 2012-08-25 13:52:41Z

0

Your string isn't formatted correctly:

'<img src="' + imgurl + '" style="float:left margin: 0 5px 5px 0;" />';

answered Aug 25, 2012 at 13:52

David G

97.6k41 gold badges173 silver badges258 bronze badges

Collectives™ on Stack Overflow

Passing a variable to a Javascript function - syntax?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related