Jump to content

Nested Javascript/Dynamic Function Names


Konradjustimagine
 Share

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

Edited by Konradjustimagine
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...