...

View Full Version : Heavy javascript. Need to trim repeated parts?



dance621
11-13-2006, 06:52 PM
Hi all, I have some javascript which repeats large blocks of code with a few subtle difference. I was wondering how to trim it. Ideally I would like to refernce as much as possible from an external .js file. But I am not sure which parts can be cut out. The code is in the body of the html.

The page has about 50 different images and each leads to a chunk of code which is an onclick event...The middle part of each chunck does not vary.

Each section looks like this (i have changed the bits that vary to "VARIES"




<TD vAlign=top width=45><A href="#topanchor"
onclick="
VARIES.src='http://hardyart.co.uk/frame/VARIES.jpg';
document.getElementById('VARIES').style.backgroundImage =
'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
document.getElementById('VARIES').style.backgroundImage =
'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
document.getElementById('VARIES').style.backgroundImage =
'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
document.getElementById('VARIES').style.backgroundImage =
'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
document.getElementById('VARIES').style.backgroundImage =
'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
document.getElementById('VARIES').style.backgroundImage =
'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
document.getElementById('VARIES').style.backgroundImage =
'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
document.getElementById('VARIES').style.backgroundImage =
'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
document.getElementById('VARIES').style.backgroundImage =
'url(\'http://hardyart.co.uk/frame/VARIES\')';
document.getElementById('VARIES').style.backgroundImage =
'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
document.getElementById('VARIES').style.backgroundImage =
'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
frameselected = 'VARIES'; frametitle = 'VARIES'; frameprice = VARIES; framethick = VARIES;
THIS PART DOES NOT VARY check();
document.calc2.Title.value = 'Frame for print ' + ebaytitle;
document.calc2.Print.value = '' + printprice;
document.calc2.Total.value = '(print and frame) ' + ((Math.round((calcaddframe(setup,backbrdprice,barrierbrdprice,glassprice,innermprice,framedarea,oute rmprice,framethick,borderwidth,borderheight,frameprice,slipthick,picturewidth,pictureheight,slippric e)+printprice)/5)*5)-0.01);
document.calc2.Link.value = 'http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=' + testmeout;
document.calc2.Frame.value = frametitle + ' (' + frameselected + ')';
document.calc2.Mount1.value = 'Outer Mount: ' + outermtitle + ' (' + outermselected + ')';
document.calc2.Mount2.value = 'Inner Mount: ' + innermtitle + ' (' + innermselected + ')';
document.calc2.Slip.value = sliptitle + ' (' + slipselected + ')';
document.calc3.D.value = 'eBay Item Number: ' +testmeout; document.calcprice.p.value = 'Print only: ' + printprice + ' ; Framed print: ' + ((Math.round((calcaddframe(setup,backbrdprice,barrierbrdprice,glassprice,innermprice,framedarea,oute rmprice,framethick,borderwidth,borderheight,frameprice,slipthick,picturewidth,pictureheight,slippric e)+printprice)/5)*5)-0.01);"> THEN IT VARIES AGAIN
<IMG name=imagef1 src="http://hardyart.co.uk/frame/VARIES.jpg" Title="VARIES" border=0></A></TD>
Cheers

phantom007
11-13-2006, 06:58 PM
Hey I am also looking for a similar answer, anyone can reply this?



Thanx

VR2
11-14-2006, 12:28 AM
Hmmmm often times in this situation I find that what needs to be done is to setup an array and everything gets solved :)


var arr = ["Varies1", "Varies2", "Varies3", "Varies4"];

for (var i = 0; i < arr.length; i++)
{
var ele = arr[i];
var img = document.createElement("img");
img.src = ele + ".jpg";
document.getElementById(ele).style.backgroundImage = ele + "_back.jpg";

// etc
}


or if that is too limiting then have an array of objects

var arr = [{src: "varies1.jpg", id: "something", backgroundSrc: "SomethingElse.jpg"}, {src: "varies2.jpg", id: "something2", backgroundSrc: "SomethingElse2.jpg"}];

for (var i = 0; i < arr.length; i++)
{
var ele = arr[i];
var img = document.createElement("img");
img.src = ele.src;
document.getElementById(ele.id).style.backgroundImage = ele.background Src;

// etc
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum