creating html within javascript

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

Also in #JavaScript _↴