What is the correct way to pass strings to javascript function?

Question

In javascript you can have multiple methods to pass string to a function. But which one is the most correct way?

eg 1 <a onclick='myfunction("mystring")'>1</a>
eg 2  <a onclick="myfunction('mystring')">1</a>

Edit I dont consider this is a duplicate question deserving a downvote. That question is dealing with code inside a javascript. This is regarding calls from html to code.

I'd use the latter - attribute values in HTML are recommended to be double quoted so stick with that. Ideally though your JS should be in a separate file — Bojangles, Jul 07 '13 at 18:45
You pass a string like any other argument (it doesn't matter what value the argument is). If you are asking whether you should use `'` or `"` for string literals, it doesn't matter (as long as the final source is valid). — Felix Kling, Jul 07 '13 at 18:45
@FrédéricHamidi Its a c thing. You wont understand unless you are from c county :P — Flood Gravemind, Jul 07 '13 at 18:48
Actually, this is not a JavaScript question at all, but one of acceptable HTML syntax, which varies depending on which version of HTML is being used. In XHTML, attributes MUST be surrounded by double-quotes but in HTML5, they can use either single- or double-quotes, or under certain circumstances, no quotes at all. — Rob Raisch, Jul 07 '13 at 19:08
@missingno, actually it's "JavaScript" (https://en.wikipedia.org/wiki/JavaScript) — Rob Raisch, Jul 07 '13 at 19:09

score 2 · Answer 1 · answered Jul 07 '13 at 18:44

2

Both are perfectly acceptable variations, just remain consistent with what you use for the outer-most quotations. I prefer single quotes in JS.

answered Jul 07 '13 at 18:44

Christian Duvall

399
1
10

This is not true. See my comment above. – Rob Raisch Jul 07 '13 at 19:11

cocco · Accepted Answer · 2013-07-07T19:07:49.080

the old way is

<a onclick="myfunction('mystring')">1</a>

but this has alot of limits.

I think the most correct way to pass strings (variables) to javascript is this:

a new way to interact with clickevents is to add eventlisteners in your javascript code.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
 var handler=function(e){//define your function (click handler)
  console.log(e,this);// contains the event details and the clicked element details
 }
 var a=document.getElementsByTagName('a')[0]; // with this line i get the first a
 a.addEventListener('click',handler,false);// add the click lisstener
}
</script>
</head>
<body>
<a>1</a>
</body>
</html>

so now u just have to find out where is the best place to storeyour string in the <a>1</a>

in the title

<a title="mystring">1</a>

to get this info in your handler u just have to write this.title to get the string

inside the anchor

<a>mystring</a>

to get this info in your handler u just have to write this.innerText to get the string

there is also a new way to store information inside elements called dataset

<a data-string="mystring">1</a>

to get this info in your handler u just have to write this.dataset['mystring'] to get the string

like i sayd it passes also the event details... inside that u can find also the element.

most common way is target:

e.target.title

e.target.innerText

e.target.dataset['string'];

using this addEventListeners allows you to add mutiple click events ... or at the other side it allows you to handle multiple elements with one click.

score 1 · Answer 3 · answered Jul 07 '13 at 18:45

Both are basically equivalent. When coding inline attributes I prefer using the second version since using double quotes for attributes is more usual:

<img src="path/to/image">

In pure Javascript code thats not inside inline HTML single strings and double strings are completely equivalent (differently from PHP or Perl where double quotes do interpolation) so just chose a convention. I prefer using single quotes by default and use double quotes to indicate strings that are exposed to the user (those strings might need to be translated in the future, and so on)

What is the correct way to pass strings to javascript function?

3 Answers3