Delimiting four nested items in Javascript/Html

Question

Okay this is frustrating me to no end. I recently coded a page in JS for a buddy of mine who wants to display wedding pictures to a family to see which ones they'd like to purchase.

I used a for loop to count 1-904:

for (beginnum=1;beginnum<=904;beginnum++) { yada yada...

Then, I used adobe bridge to rename the camera files to be 1-904 and their thumbnails (1-904 + _thumb) and used the loop number to display 904 image spaces, and the correctly numbered picture:

[note:using <) in place of the usual open tag since the site wont display it]

IE... document.write(beginnum + ":" + "<)img src='pictures" + beginnum + "_thumb.jpg' />");

Opera... document.write("<)div>" + beginnum + ":" + "<)img src='pictures" + beginnum + "_thumb.jpg' /><)/div>")

This all works perfectly in IE and Opera (with external CSS modifying the div to not line break).

I then created a function to call up the large version of the picture when clicked on.

The problem is, when I try and nest this function into the JavaScript generated HTML I would need four delimiters. I've heard ''' or """ or the &+numeric; work in some cases as a third and fourth but I can't seem to get them to work... where I run into a problem is here...

[note:again using <) for open tag]

document.write("<)a href='javascript:void(0); onClick=

Since I've already used up " and ' I now have nothing left to use to call the function when a picture is clicked.

I usually don't ask for any help, but this time I can't think of anything else that should work... I assume maybe using JS to generate the html leaves me with ONLY 2 delimiters that will be recognized by the browser but I am not sure, anyone know for sure? Any fixes anyone can think of?

Thanks, ~Z~

Answer 1

Try building the string one piece at a time instead of trying to build the whole literal for the document.write.

Whenever things get too convoluted to follow, just do one part at a time.

var s;

s = "'Hello.' ";
s += '"I must be going."';

Answer 2

Maybe this will work

for (i=0; i<904;i++)
{
    document.write("<div class=\"DivClassName\"><img src=\"pictures_" + i + "thumb.jpg\" onclick=\"OpenAWindowAndDisplayTheBigPhoto(" + i + ")\"></div>");
}

Another approach: Suppose you put everything inside a <DIV id="mainDIV">

var mainDIV = document.getElementByID("mainDIV");
var div, img, a;
for (i=0; i<904; i++)
{
   div = document.createElement("DIV");
   div.className = "DivClassName";
   a = document.createElement("A");
   a.href = "javascript:void(0)";
   a.onclick = function() {OpenAWindowAndDisplayTheBigPhoto(i);};
   img = document.createElement("IMG");
   img.src = "pictures_" + i + "thumb.jpg";
   mainDIV.appendChild(div);
   div.appendChild(a);
   a.appendChild(img);   
};

Answer 3

Without seeing code it is hard to say for a fact, but you may want to take more advantage of the fact that javascript is a first-class language, so you can create functions and pass them as arguments to other functions, or have functions return functions.

By doing this, you can decompose your page into something that sounds a bit more manageable.

Also, take advantage of the onclick event.

You should be able to simplify the javascript and so avoid this problem, IMO.