Jump to content

Nested Javascript/Dynamic Function Names


Konradjustimagine

Recommended Posts

Hello Everyone, I've been working on an image gallery for my website however I've reached a sticking point.Basically what I'm trying to do is when a thumbnail is clicked its corrisponding image and decription pop up in a neighboring divHowever the thumbnails are contained within an array of divs which they moved up and down in via this script:

var addition=0;var MI_1a_Img=1;function Menu_Down(){addition=(addition+3);		document.getElementById('Menu_Item_1a_Img').setAttribute('src', 'Artwork_Images/Thumbnails/'+(MI_1a_Img+addition)+'.jpg');document.getElementById('Menu_Item_1a_Img').setAttribute('onload', "document.getElementById('Menu_Item_1a_Img').style.display='inline'");document.getElementById('Menu_Item_1a_Img').setAttribute('onerror', "document.getElementById('Menu_Item_1a_Img').style.display='none'");}function Menu_Up(){addition=(addition-3);			document.getElementById('Menu_Item_1a_Img').setAttribute('src', 'Artwork_Images/Thumbnails/'+(MI_1a_Img+addition)+'.jpg');document.getElementById('Menu_Item_1a_Img').setAttribute('onload', "document.getElementById('Menu_Item_1a_Img').style.display='inline'");document.getElementById('Menu_Item_1a_Img').setAttribute('onerror', "document.getElementById('Menu_Item_1a_Img').style.display='none'");}

Then I use this script to load the thumbnail's corrisponding image into the a div:

function MI_1a_Content(){document.getElementById('Artwork_Selection_Display_Area').innerHTML='<img id=MI_1a src=Artwork_Images/' +(MI_1a_Img+addition) + '.jpg>';}

This all works fine. But, when I try getting MI_1a_Content() to load a description into a div allocated for image descriptions I run into problems.I've tried many things realating to nesting javascript inside javascript already and this is where I'm stuck:

function text1(){document.getElementById('Artwork_Selection_Display_Area_Text').innerHTML='DESCRIPTION ONE';}function MI_1a_Content(){var txt = document.getElementById('Menu_Item_1a_Img').getAttribute('src');var numb = txt.match(/\d/g);numb = numb.join("")numb = parseInt(numb);document.getElementById('Artwork_Selection_Display_Area').innerHTML='<img id=MI_1a src=Artwork_Images/' +(MI_1a_Img+addition) + '.jpg>';document.getElementById('Artwork_Selection_Display_Area_Text').innerHTML="<script type='text/javascript'>text"+numb+"() <\/script>";

I've tried breaking up the script tag without luck: innerHTML="<scr"+"ipt>"I'm wondering if I could simplify this issue by creating functions that have variables in their names.For example something like function text1() gets broken apart into "text"+number_var+"()"I hope I've described this problem enough to be understood.Here are links to my full javascript file and gallery page:JavascriptGalleryThankyou for your time and consideration, Sincerely, KonradPS. I am coding using DocType:Strict

Link to comment
Share on other sites

You can't use innerHTML to add script elements to a page like that. It would probably be better to create a new script element using DOM methods, use the innerHTML property of the script element to put your code in it, and append the script element to another element on the page.

Link to comment
Share on other sites

You can't use innerHTML to add script elements to a page like that. It would probably be better to create a new script element using DOM methods, use the innerHTML property of the script element to put your code in it, and append the script element to another element on the page.
Thanks, this gets me off a wild goose chase.Cheers!
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...