PDA

Click to See Complete Forum and Search --> : creating html within javascript

chestertb
08-04-2003, 12:17 PM
Hi All,

I have been trying to use innerHTML to construct a very simple two layered menu system.

On mousover on an image in the upper line, the html calls a function which swaps the button image, and then replaces the whole set of images underneath that line with the child set belonging to that button. This works fine when I'm just substituting text, but I want to substitute a constructed line of html instead of text.

I have tried using eval, but it doesn't seem to work.

This works;

function swap(imgName, imgRef, menRef)

{

test.innerHTML = "test";

imgOn = eval(imgName + 'b.src');
document[imgName].src = imgOn;

swapPic = eval(imgRef + '.src');
document.images['submenu'].src = swapPic;

}

This doesn't work AND the swap parts of the function cease working too;

function swap(imgName, imgRef, menRef)

{

test.innerHTML = eval("<p style="+/"+"margin-top: 0; margin-bottom: 0"+/"+"><img src="+/"+"images/menu/blank.jpg"+/"+" border="+/"+"0"+/"+" width="+/"+"802"+/"+" height="+/"+"20"+/"+">");

imgOn = eval(imgName + 'b.src');
document[imgName].src = imgOn;

swapPic = eval(imgRef + '.src');
document.images['submenu'].src = swapPic;

}

What have I done wrong?

Why do the document functions cease working when the innerHTML function fails? (Note that it doesn't matter what order I put them in.)

Is javascript really a fickle as I am starting to suspect?

ctb
ibidris2003
08-04-2003, 01:25 PM
Hi,

it looks like you are trying to escape quotes with / instead of \. This might be causing the errors

http://galileo.spaceports.com/~ibidris/
chestertb
08-07-2003, 06:33 AM
Doh!

Big oops.

However!!!

I fixed that, and it still does not work.

if I use
innerHTML="test";
it places
test
in the appropriate place.

if I use
innterHTML=test.innerHTML = eval("<img border="+\"+"0"+\"+" src="+\"+ "images/picturestrip.jpg"+\"+">");
generates an error "Invalid Character"

if I try something really simple, like
innerHTML=eval("<b>test</b>")
it generates a syntax error

note the actual code is as follows;

function highlight(imgName, imgRef, menRef)
{
switch (menRef)
{
case 'menu0' :
submenu.innerHTML = "this really sucks"
break;
case 'menu1' :
submenu.innerHTML = eval("<b>test<\b>");
break;
case 'menu2' :
submenu.innerHTML = "menu2";
break;
case 'menu3' :
submenu.innerHTML = "menu3";
break;
case 'menu4' :
submenu.innerHTML = "menu4";
break;
case 'menu5' :
submenu.innerHTML = "menu5";
break;
}


imgOn = eval(imgName + 'b.src');
document[imgName].src = imgOn;


}

If the mouse rolls over anything but option 1, it's fine. Option one generates the error.

CTB
Charles
08-07-2003, 06:37 AM
1) You don't need to wrap your strings in "eval" functions. It only slows down your processing.

2) Both HTML and JavScript recoginze both single and double quotes. I would suggest that you restrict yourself to using single quotes for the JavaScript and double quotes for the HTML.
ibidris2003
08-07-2003, 06:38 AM
submenu.innerHTML = eval("<b>test<\b>");

is suspicious. Should be submenu.innerHTML = "<b>test<\b>";

http://galileo.spaceports.com/~ibidris/
Mr J
08-07-2003, 08:26 AM
Post your full code..

You do not eval this

test.innerHTML = eval("<p style="+/"+"margin-top: 0; margin-bottom: 0"+/"+"><img src="+/"+"images/menu/blank.jpg"+/"+" border="+/"+"0"+/"+" width="+/"+"802"+/"+" height="+/"+"20"+/"+">");


it should be

test.innerHTML = "<p style=\"margin-top: 0; margin-bottom: 0\"><img src=\"images/menu/blank.jpg\" border=\"0\" width=\"802\" height=\"20\">"
chestertb
08-07-2003, 08:47 AM
Magic!

Absolutely... thank you!

Seems so simple now that I've seen it written.

Works a treat.

CTB
Mr J
08-07-2003, 09:18 AM
Yeh .. . . ... . you have to be careful when using the eval() method

;)