Concatination problem using innerHTML

[lazyRascal]

I'm trying to dynamically change an anchor and image within a <div> section from a function.

example:
function changeInfo{

var text1, text2, text3
text1 = "<a nohref>"
text2 = "<img src='dog.gif'>"
text3 = "</a>"

document.getElementById('myDiv').innerHTML = text1 + text2 + text3

}


This code works with unwanted consequences. It displays NaN before displaying the image. Just to check, I tried this code sending text1 only, with text1 = 75. The 75 displayed without the NaN. So, I'm assuming the browser (Foxfire) is expecting a number, although I don't know why.

I'm trying to get the simpliest form of this I can come up with to work. Then, I want to add an onMouseOver event to the anchor.

I don't really understand concatination well, so I'm struggling with this. Part of the problem is that I'm using VBscript in my asp to generate this javascript function.

My objective is to produce the following:

<a nohref onmouseover="document.getElementById('sq1').src='over.gif'; document.getElementById('pic').src='/images/cat.jpg'";
onmouseout="document.getElementById('sq1').src='off.gif'; document.getElementById('pic').src='images/dog.jpg'";
onClick="myRef = window.open('show.asp?picture=dogCloseup.jpg','mywin',
'left=420,top=220,width=274,height=260,toolbar=0,resizable=0'); myRef.focus()">
<img src="off.gif" id="sq1" border="0"></a>

I hope this posting is stated clearly enough to figure out what I'm asking.

Thanks in advance. Any help is greatly appreciated.

Thanks

 

[BillyRayPreachersSon]

How / where are you calling the changeInfo function?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[lazyRascal]

To clarify:

My page has a column of thumbnails on the left side of the page. When a thumbnail is clicked (this calls the function), a display area on the right loads the full size image of the thumbnail.

Under the full sized image, I want to create a row of rollovers which have related images to the image in the display area.

I have the function which loads the full sized image. I am trying to include this code in that function.

If I can get one to work, I was just planning to put the code in a loop to create the entire row of rollovers.

Hope this makes sense.

 

[cLFlaVA]

any chance you're using frames?



*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[BillyRayPreachersSon]

When a thumbnail is clicked (this calls the function)

I was really hoping to see the code... I'm still no better of knowing whether you're calling it correctly or not from that description.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[lazyRascal]

Sorry I misunderstood.

Here is the function.

function selected(row, i, p, t)
{

	row.style.backgroundColor = 'aaaaaa';
	row.style.color = 'white';

	if (curSelected != null && curSelected != row)
	{
		curSelected.style.backgroundColor = '';
		curSelected.style.color = '';
	}
	curSelected = row;

document.getElementById('pic').src="/images/" + i + "/" + p + "_1.jpg";


... This is where I want to put the code ...

}

 

[BillyRayPreachersSon]

That [!]still[/!] does not show where or how you are calling the "changeInfo" function.

Can you show this? If not, then presumably it is never being called?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[lazyRascal]

The calling asp code rendered should produce the following.

<table cellpadding='3' cellspacing='0' id='myTable' class='myTable' bgcolor='#ffffff'>
  <tr valign='top' onClick='selected(this,1,100031)'>
    <td width='90' valign='top'> 
       <A nohref border='0'><img src='images/1/100031_0.jpg' height='60' border='0' style='border-color: #ffffff'>
       </a>
     </td>
     <td class='listCol' width='155'>dataString</td>
  </tr>
</table>

 

[lazyRascal]

Sorry, the function is named selected in the previous code. In my example I called it changeInfo.

I do apologise. Please bare with me.

 

[cLFlaVA]

so, again, you said your code doesn't work. yet you have yet to show us the code that doesn't work. you've provided an "example" that would work, were it called alone (and proper parentheses added to the function definition).

then, you show us the *actual* function, and you still decide to leave out the code that "doesn't work".

if you want help, make it easy for us to help you.



*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[lazyRascal]

function selected(row, i, p, t)
{

	row.style.backgroundColor = 'aaaaaa';
	row.style.color = 'white';

	if (curSelected != null && curSelected != row)
	{
		curSelected.style.backgroundColor = '';
		curSelected.style.color = '';
	}
	curSelected = row;
document.getElementById('pic').src="/images/" + i + "/" + p + "_1.jpg";


   ... The code below is what doesn't work ...

document.getElementById('tn').innerHTML="<a nohref onmouseover="document.getElementById('sq1').src='over.gif'; document.getElementById('pic').src='/images/1/100031_3.jpg'";
onmouseout="document.getElementById('sq1').src='off.gif'; document.getElementById('pic').src='images/1/100031_1.jpg'"; onClick="myRef = window.open('show.asp?number=100013_1.jpg','mywin',
'left=420,top=220,width=274,height=260,toolbar=0,resizable=0'); myRef.focus()">
<img src="off.gif" id="sq1" border="0"> </a>"

}

 

[cLFlaVA]

while there is certainly a better way of doing this, try this:

document.getElementById('tn').innerHTML="<a nohref onmouseover=\"document.getElementById('sq1').src='over.gif'; document.getElementById('pic').src='/images/1/100031_3.jpg'\" onmouseout=\"document.getElementById('sq1').src='off.gif'; document.getElementById('pic').src='images/1/100031_1.jpg'\" onClick=\"myRef = window.open('show.asp?number=100013_1.jpg','mywin','left=420,top=220,width=274,height=260,toolbar=0,resizable=0'); myRef.focus()\"><img src=\"off.gif\" id=\"sq1\" border=\"0\"> </a>";

copy and paste exactly as it appears - the line breaks you have, along with nested quotation mark problems, are causing your error.



*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[lazyRascal]

It appears to be working. What is the \ character in the code doing?

btw, thank you so much.

 

[cLFlaVA]

it means "this quotation mark doesn't end the string".

look at this:

var myString = "this is "a string"";

do you see the problem?

the escape character (\) means "include the following character as a literal character.

this is valid:

var myString = "this is \"a string\"";

*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[lazyRascal]

This, as simple as it may be to a knowledgable person, may be the most important thing I've learned today!

Thanks a million.

 

[BillyRayPreachersSon]

Your code is working well now?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cLFlaVA]

Dan,

you wouldn't expect it to? i was iffy about passing javascript calls through innerHTML (onmouseover, etc.), but didn't feel like throwing together a test case.

i was just concerned with fixing syntactical errors.



*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[BillyRayPreachersSon]

Nothing no sinister... just wanted to make sure the OP had no more problems, really.

I hate flat-pack furniture. Still, it beats exercise!

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[lazyRascal]

Yes, the code works now. To clean it up, per the 'certainly better way' comment, I changed it to:

var tStr
tStr = ""
if ( 1 <= t){
tStr= "<a nohref id='a1' onmouseover=\"document.getElementById('sq1').src='over.gif'; " ;
tStr= tStr + "document.getElementById('pic').src='/images/" + i + "/" + p + "_2.jpg'\"; " ;
tStr= tStr + "onmouseout=\"document.getElementById('sq1').src='off.gif'; " ;
tStr= tStr + "document.getElementById('pic').src='images/" + i + "/" + p + "_1.jpg'\"; " ;
tStr= tStr + "onClick=\"myRef = window.open('show.asp?number=/images/" + i + "/" + p + "_2.jpg','mywin', " ;
tStr= tStr + "'left=420,top=220,width=274,height=260,toolbar=0,resizable=0'); myRef.focus()\">" ;
tStr= tStr + "<img src=\"off.gif\" id=\"sq1\" border=\"0\"></a>" ;
document.getElementById('thumb1').innerHTML= tStr;
}


This allows me to create a rollover that displays a related image. On onMouseOut, it reverts to the original image. If the rollover is clicked, it opens an enlarged image of the currently selected image.

Now, I'm trying to put the code in a loop in order to create an entire row of rollovers with varying numbers of related images.

I'm trying to learn a little javascript, but it's a battle. Trying to use vbscript to generate javascripts using asp is about more than I can handle.

Thanks for your help.