Pass value from loop to javascript function

Question

I have following code:

var storedNames = JSON.parse(localStorage.name); 
var mytable = "<table> cellpadding=\"0\" cellspacing=\"0\"><tbody><tr>"; 
for (var i = 0; i < storedNames.length; i++) {   
  if (i % 2 == 1 && i != 1) {
     mytable += "</tr><tr>";   
  }

    mytable += "<td>" + storedNames[i].name +" "+ storedNames[i].email+"</td><td><img id='arrow' src='arrow.png' height='20' width='20' onclick='redirectToDetail();' ></td></tr>"; 
} 

mytable += "</tbody></table>";

document.write(mytable);

here, in redirectToDetail function i want to i value . How can I pass this? Any idea? thank u in advance

`var mytable = " cellpadding=\"0\" cellspacing=\"0\">";` or `var mytable = "
";`? — Narek, Apr 09 '13 at 07:32
@Narek Answers should be posted as Answers. It isn't really the appropriate place in the comments section. — Matthew Cox, Apr 09 '13 at 07:33
@FeistyMango this is **not answer**, just wrong syntax notice. — Narek, Apr 09 '13 at 07:35
@Narek Duely noted. However, his syntax is completely valid. Html standard allow him to use either single quotes or double quotes for attributes. In this case, he chose to use single quotes within his html template strings. http://stackoverflow.com/questions/2373074/single-vs-double-quotes-vs — Matthew Cox, Apr 09 '13 at 07:42
@FeistyMango do we speak about same thing? :) Check symbol after ` — Narek, Apr 09 '13 at 07:43
@Narek Ahh, I see what you mean. I thought you were making an issue of the quotes. Doh — Matthew Cox, Apr 09 '13 at 07:45

score 1 · Answer 1 · answered Apr 09 '13 at 07:30

try this

 mytable += "<td>" + storedNames[i].name +" "+ storedNames[i].email+"</td><td><img id='arrow' src='arrow.png' height='20' width='20' onclick='redirectToDetail(\'"+ i +"\');' ></td></tr>";

and take that in redirectToDetail

 function redirectToDetail(val){
     alert(val);
  }

score 0 · Answer 2 · answered Apr 09 '13 at 07:29

0

try this

onclick='redirectToDetail(\'"+i+"\')

answered Apr 09 '13 at 07:29

muneebShabbir

2,500
4
29
46

score 0 · Answer 3 · answered Apr 09 '13 at 07:30

0

I think this will do. check it.

mytable += "<td>" + storedNames[i].name +" "+ storedNames[i].email+"</td><td><img id='arrow' src='arrow.png' height='20' width='20' onclick='redirectToDetail(" + i + ");' ></td></tr>";

answered Apr 09 '13 at 07:30

999k

6,257
2
29
32

Ok. I think you noticed this unwanted > in var mytable = " cellpadding=\"0\"
– 999k Apr 09 '13 at 08:10
Also in your code pairing issue for tag . For eg if storedNames.length == 0 – 999k Apr 09 '13 at 08:14

Matthew Cox · Accepted Answer · 2013-04-09T07:45:06.833

Just add the value as a literal constant that is passed to the onclick event and you are home free. In addition, I would strongly encourage you to consider using an array and joining the strings as you will yield much better performance particularly in IE.

var storedNames = JSON.parse(localStorage.name); 
var mytable = ['<table cellpadding="0" cellspacing="0"><tbody><tr>'];
for (var i = 0; i < storedNames.length; i++) {   
  if (i % 2 == 1 && i != 1) {
     mytable.push("</tr><tr>");   
  }
  mytable.push('<td>' + storedNames[i].name + ' ' + storedNames[i].email + '</td><td><img id="arrow" src="arrow.png" height="20" width="20" onclick="redirectToDetail(' + i + '"></td></tr>"');
} 

mytable.push("</tbody></table>");

document.write(mytable.join());

Now you can declare you onclick function like so:

function redirectToDetail(value) {
   //do stuff with the value
}

Pass value from loop to javascript function

4 Answers4