Question

I have to dynamically create series of links that when clicked – change some others elements properties (src, class, text), basing on some data taken from elsewhere (json).

I’ve got such a piece of code:

  // this is data I need processed
  screenshots = report_data.screenshots;
  // for each I'd like to create a link
  for (var i=0; i < screenshots.length; i++) {
      document.write('<a href="" onclick="{document.getElementById(\'the_screenshot\').src = \''+ screenshots[i].screenshotFile + '\'; ' + 'return false;}">' + screenshots[i].screenshotTitle + '</a>');
  });

However proper escaping all those characters took me two hours.
I’d like to place there a call to elsewhere defined parametrized function.
Then I’d only have to input the parameters.

I tried of many various combinations of what I’ve found on stackoverflow.com
leading me to a terrible headache.

Please, help.

Answer 1

Accidentally, after hours of trying and retrying I asked my friend and his wise head told me to do it somewhat more sophisticated way:

• Create a parametrized function in plain javascript.
• Use closures – assign to onclick only the anonymous function that calls the above mentioned with adequate parameter.
• Create the pattern string of the tag to pass to the document.write(html) with variable-like section for onclick function code.
• Use string.replace(A,toB) function: create a string with function code to assign.
• Do the same trick with the function parameter if required.
• Pass the filled in pattern to document.writa(html) function.

The final solution looks like this (may be not exactly same, but the idea is pointed):

// function to call by closure
onLinkClick = function(SRC) {
    document.getElementById('the_screenshot').src = SRC;
    // and here one can place as much code as he needs // plain js
    // and I did it
}

// this is data I need processed
screenshots = report_data.screenshots;
for (var i=0; i < screenshots.length; i++) {
    // first enlist every basic part with it's inner parameters as text
    var pattern = '<a href="" onclick=ONCLICK>TEXT</a>'
    var onclick = '(function (){onLinkClick(PARAM); return false;})()';
    var text = screenshots[i].screenshotTitle;
    var param = screenshots[i].screenshotFile;
    // now inject them - without any more escaping via replace
    onclick = onclick.replace('PARAM', param);
    pattern = pattern.replace('ONCLICK', onclick);
    pattern = pattern.replace('TEXT', text);
    document.write(pattern);
});

This way the code looks much more elegant than on the first approach.
I hope this helps those, who will have to face javascript in future.

One more thing, I used to think a detail, but it came out to be a really serious: syntax. To make a closure function do it’s work:

• write a function just like usual
• surround it with parentheses
• follow it by a another pair of empty parentheses

like this:

(function(){return false;})()

Now it’s an anonymous function, not just an anonymous function call. And now it works.