Array returning undefined

**robin218** · 04-26-2008, 07:39 PM

First, what I'm trying to do is pass multiple values without <a href="" rel="" rev=""> tags. I am admittedly horrible with javascript, but I did this little mockup just to test and it works... except the height and width values aren't being passed. Every time I add them back into the js code, they are returned as undefined. I tried using a different delimeter, splitting each value as a standalone - nothing is working. I've spent hours and hours on this, and I'm stumped.

This isn't a polished script yet, obviously, but I'm curious why I can't extract the first and second values from the array, and it only returns the first (imagepath). I know someone else can probably instantly identify why it isn't working. Please help!

Here's the code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<style>
#caption { width: 500px; color: #000000; margin-top: 12px; padding: 6px 6px; border: 1px solid #9c9c9c; }
</style>
<script type="text/javascript">
function setLgImg(newSRC){
// need to split 3 values passed to setBigImage (imagepath, width, height)
var imagearray=newSRC.split(",");
var imagepath=imagearray[0];
var imageW=imagearray[1];
var imageH=imagearray[2];

var oldHTML = document.getElementById('loadarea').innerHTML;
imageHTML = '<img src="'+imagepath+'" style="border: 1px solid #c00000\;" />'
// passes imageW and imageH as undefined, so scrapped this...
//imageHTML = '<img src="'+imagepath+'" width="'+imageW+'" height="'+imageH+'" style="border: 1px solid #c00000\;" />'
document.getElementById('loadarea').innerHTML = imageHTML;
}
function clearLgImg(){
imageHTML.value =''; return false;
}

function changeText(evt){
var oldHTML = document.getElementById('caption').innerHTML;
var newHTML = "<p><span style='color:#c00000\;'>" + evt + "</span></p>";
document.getElementById('caption').innerHTML = newHTML;
}
function clearChangeText(evt) {
newHTML.value =''; return false;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<img src="gallery/images/thumb1.jpg" onmouseover="setLgImg('gallery/images/photo1.jpg','140','225');changeText('Preloaded caption for the very first image 1 by default.');" onmouseout="clearLgImg();clearChangeText();">
</td>
<td rowspan="3">
<div id="loadarea">
<img src="gallery/images/photo1.jpg" width="140" height="225" border="0" style="border: 1px solid #c00000;" alt="" />
</div>
</td>
</tr>
<tr>
<td>
<img src="gallery/images/thumb2.jpg" onmouseover="setLgImg('gallery/images/photo2.jpg','400','300');changeText('Change Text to something about image 2.')" onmouseout="clearLgImg();clearChangeText();">
</td>
</tr>
<tr>
<td>
<img src="gallery/images/thumb3.jpg" onmouseover="setLgImg('gallery/images/photo3.jpg','140','225');changeText('Change Text to something about image 3.')" onmouseout="clearLgImg();clearChangeText();">
</td>
</tr>
</table>

<div id="caption"><p>Preloaded caption for the very first image 1 by default.</p></div>
</body>
</html>

**ReMaX** · 04-26-2008, 09:59 PM

hm,
1. try to give a real array as newSRC parameter - if this helps - and read it out via

Code:

var imagepath=newSRC[0];
var imageW=newSRC[1];
var imageH=newSRC[2];

2. perhaps it is only because you tried to make your example as simple as possible but you should make a class out of it with the global variables imageHTML, oldHTML, newHTML or you cannot read them out or change them in your functions; e.g. changeText().

Else... I do not know

greetings
Max

**ReMaX** · 04-26-2008, 11:43 PM

Ah, no, everything's clear

. In your function call you pass three parameters but you only use the first one. You could use a variadric function in which all parameters are in the arguments array. So the function has to look like this:

Code:

function setLgImg(){
	var imagepath=arguments[0];
	var imageW=arguments[1]+"px"; //firefox is not interested in css values without the definition of its type ("px") - you know what I mean^^
	var imageH=arguments[2]+"px";

	oldHTML = document.getElementById('loadarea').innerHTML;
	imageHTML = '<img src="'+imagepath+'" style="border: 1px solid #c00000\;" />'
	imageHTML = '<img src="'+imagepath+'" style="border:1px solid #000000;width:'+imageW+';height:'+imageH+';" />'
	document.getElementById('loadarea').innerHTML = imageHTML;
}

I think you are new to JS and for your project you need a class but - don't worry - JS classes are for children

. The problem is that your variables exist only in the function itself; not longer.

Code:

function ClassName() {
	// global class variables defined here for further access in all member functions
	// attention: this.functionname defines a public function. without this. is private. public functions can access on private functions and attributes but not the other way around.
	var imageHTML;
	var oldHTML;
	var newHTML;

this.setLgImg = function() {
	var imagepath=arguments[0];
	var imageW=arguments[1]+"px"; //firefox is not interested in css values without the definition of its type ("px") - you know what I mean^^
	var imageH=arguments[2]+"px";

	oldHTML = document.getElementById('loadarea').innerHTML;
	imageHTML = '<img src="'+imagepath+'" style="border: 1px solid #c00000\;" />'
	imageHTML = '<img src="'+imagepath+'" style="border:1px solid #000000;width:'+imageW+';height:'+imageH+';" />'
	document.getElementById('loadarea').innerHTML = imageHTML;
};

this.clearLgImg = function() {
	imageHTML.value =''; return false;
};

this.changeText = function(evt){
	oldHTML = document.getElementById('caption').innerHTML;
	newHTML = "<p><span style='color:#c00000\;'>" + evt + "</span></p>";
	document.getElementById('caption').innerHTML = newHTML;
};

this.clearChangeText = function(evt) {
// what do you want to do with that? There is no newHTML.value value!
	newHTML.value =''; return false;
};

}

var classinstance = new ClassName();

call example:

Code:

classinstance.setLgImg('gallery/images/photo2.jpg','400','300');

Okay, I did not test it but it should work. Good Luck!

Max

**robin218** · 04-27-2008, 03:24 AM

ReMax, thanks a million. Now that I look at it, it seems so logical to create classes. As I said, I am a horrible javascript coder. Nothing comes as second nature, comes easily, or seems familiar.

this.clearChangeText = function(evt) {
// what do you want to do with that? There is no newHTML.value value!
newHTML.value =''; return false;
};

I had added that because I thought every instance needed to be cleared. I guess it's not needed. I want to be sure nothing is left open to cause the page to keep loading, or trying to load.

Would a function to preload the images array be its own class, or would this be intialized separately? I would like to preload an array of the large images if possible and I don't know the cleanest way to do this.

Thanks again for you illuminating response!

Thread: Array returning undefined

Thread Tools

Search Thread

Array returning undefined

Bookmarks

Bookmarks

Posting Permissions