More on Eval

**b1randon** · Jan 3 '07, 07:22 PM

Originally posted by solomonp

Hello-

I have a javascript problem which seems that it ought to be soluble without eval, but I can only make it work with eval.

With the script below the call:
"ImageChange('m yImageName', newImage);" works fine, but:
"channelChange( 'myImageName'); " does not. The string anewsrc is being treated as a string, and not as an object even though I am asking for it's "src" property.

--------------------
function ImageChange(ima gename, newsrc)
{
document.images[imagename].src=newsrc["src"];
}

function channelChange(n ewchan) {
var anewsrc;
for (var i = 0; i < document.images .length; i++) {
if (document.image s[i].stackname) {
anewsrc=(docume nt.images[i].stackname + "_" + newchan);
ImageChange(doc ument.images[i].stackname, anewsrc);
}
}
}
-------------------------

However switching to :
--------------------
function ImageChange(ima gename, newsrc)
{
document.images[imagename].src=newsrc["src"];
}

function channelChange(n ewchan) {
var anewsrc;
for (var i = 0; i < document.images .length; i++) {
if (document.image s[i].stackname) {
anewsrc=(docume nt.images[i].stackname + "_" + newchan);
ImageChange(doc ument.images[i].stackname, eval(anewsrc)); //<-!-
}
}
}
-------------------------

allows it to work with both calls.

Is there a better alternative here?

Thanks,
Leo

Leo, I'm not sure at all what this stackname stuff you're using in your code is, so I pulled it out. To fix the src problem you'll need to assign an Image objects src member to the images src. If that sounds confusing just check out my example and it should help.

[HTML]
<html>
<head><script type="text/javascript" src="script.js" ></script></head>
<body>
<image name="img1" src="hab.jpg" />
<input type="button" value="change" onclick="channe lChange('cal.GI F');" />
</body>
</html>
[/HTML]
&

Code:

function ImageChange(imagename, newsrc)
{
	document.images[imagename].src=newsrc.src;
}

function channelChange(newchan) {
	var tempImg = new Image();
	tempImg.src = newchan;
	for (var i = 0; i < document.images.length; i++) {
		ImageChange(document.images[i].name, tempImg);
	}
}

**solomonp** · Jan 3 '07, 07:53 PM

I have several groups (or stacks) of images, and I want to change them all from the first image in the stack to the second with one click. The channelChange function is designed to find each image that has a 'stack' defined and then pass to the imageChange function the name of the stack concatenated with the name of the layer to be shown. I think it is the concatenation of the string used in anewsrc that is causing the problem.

anewsrc=(docume nt.images[i].stackname + "_" + anewchan);

The stackname attribute is just a name prefix allowing me to know which of the images I should replace the current one with.

For example I might have images named A_1.png, A_2.png, B_1.png and B_2.png. If A_1.png and B_1.png are showing (A and B would be the stacknames), I want channelChange to switch them both to show A_2.png and B_2.png. Thus I need to build up the new source from the current stackname and the requested channel, for each stack on the page.

Does that make the problem clearer?

Thanks for your help,
Leo

Originally posted by b1randon

Leo, I'm not sure at all what this stackname stuff you're using in your code is, so I pulled it out. To fix the src problem you'll need to assign an Image objects src member to the images src. If that sounds confusing just check out my example and it should help.

[HTML]
<html>
<head><script type="text/javascript" src="script.js" ></script></head>
<body>
<image name="img1" src="hab.jpg" />
<input type="button" value="change" onclick="channe lChange('cal.GI F');" />
</body>
</html>
[/HTML]
&

Code:

function ImageChange(imagename, newsrc)
{
	document.images[imagename].src=newsrc.src;
}

function channelChange(newchan) {
	var tempImg = new Image();
	tempImg.src = newchan;
	for (var i = 0; i < document.images.length; i++) {
		ImageChange(document.images[i].name, tempImg);
	}
}

**acoder** · Jan 3 '07, 10:20 PM

Originally posted by solomonp

Hello-

I have a javascript problem which seems that it ought to be soluble without eval, but I can only make it work with eval.

With the script below the call:
"ImageChange('m yImageName', newImage);" works fine, but:
"channelChange( 'myImageName'); " does not. The string anewsrc is being treated as a string, and not as an object even though I am asking for it's "src" property.

--------------------
function ImageChange(ima gename, newsrc)
{
document.images[imagename].src=newsrc["src"];
}

function channelChange(n ewchan) {
var anewsrc;
for (var i = 0; i < document.images .length; i++) {
if (document.image s[i].stackname) {
anewsrc=(docume nt.images[i].stackname + "_" + newchan);
ImageChange(doc ument.images[i].stackname, anewsrc);
}
}
}
-------------------------

However switching to :
--------------------
function ImageChange(ima gename, newsrc)
{
document.images[imagename].src=newsrc["src"];
}

function channelChange(n ewchan) {
var anewsrc;
for (var i = 0; i < document.images .length; i++) {
if (document.image s[i].stackname) {
anewsrc=(docume nt.images[i].stackname + "_" + newchan);
ImageChange(doc ument.images[i].stackname, eval(anewsrc)); //<-!-
}
}
}
-------------------------

allows it to work with both calls.

Is there a better alternative here?

Thanks,
Leo

Instead of eval use arrays:

Code:

anewsrc=document.images[i][stackname + "_" + newchan];

Does that work?

**solomonp** · Jan 3 '07, 10:41 PM

Interesting suggestion, but no.

There is no such element as document.images[i][stackname + "_" + newchan];

are you suggesting that I should store the images in an array?

Right now the images are in the document thusly, created at runtime by the application that builds this page:
A1000001_00= new Image(); A1000001_00.src ="A1000001_00.p ng"; A1000001_00.rel = "FSIA1000001_00 .png";
A1000001_01= new Image(); A1000001_01.src ="A1000001_01.p ng"; A1000001_01.rel = "FSIA1000001_01 .png";
A1000001_02= new Image(); A1000001_02.src ="A1000001_02.p ng"; A1000001_02.rel = "FSIA1000001_02 .png";A1000002_ 00= new Image(); A1000002_00.src ="A1000002_00.p ng"; A1000002_00.rel = "FSIA1000002_00 .png";
A1000002_01= new Image(); A1000002_01.src ="A1000002_01.p ng"; A1000002_01.rel = "FSIA1000002_01 .png";
A1000002_02= new Image(); A1000002_02.src ="A1000002_02.p ng"; A1000002_02.rel = "FSIA1000002_02 .png";
etc...

Originally posted by acoder

Instead of eval use arrays:

Code:

anewsrc=document.images[i][stackname + "_" + newchan];

Does that work?

**b1randon** · Jan 4 '07, 02:10 PM

Originally posted by solomonp

Interesting suggestion, but no.

There is no such element as document.images[i][stackname + "_" + newchan];

are you suggesting that I should store the images in an array?

Right now the images are in the document thusly, created at runtime by the application that builds this page:
A1000001_00= new Image(); A1000001_00.src ="A1000001_00.p ng"; A1000001_00.rel = "FSIA1000001_00 .png";
A1000001_01= new Image(); A1000001_01.src ="A1000001_01.p ng"; A1000001_01.rel = "FSIA1000001_01 .png";
A1000001_02= new Image(); A1000001_02.src ="A1000001_02.p ng"; A1000001_02.rel = "FSIA1000001_02 .png";A1000002_ 00= new Image(); A1000002_00.src ="A1000002_00.p ng"; A1000002_00.rel = "FSIA1000002_00 .png";
A1000002_01= new Image(); A1000002_01.src ="A1000002_01.p ng"; A1000002_01.rel = "FSIA1000002_01 .png";
A1000002_02= new Image(); A1000002_02.src ="A1000002_02.p ng"; A1000002_02.rel = "FSIA1000002_02 .png";
etc...

For sure. That will make your code 1000x easier. Just load all of your images into an array, then loop over changing the source as my first code block demonstrated. This is a much more controlled approach.

**solomonp** · Jan 9 '07, 05:01 PM

Ok, that sounds good. Can you point me in the right direction for loading the images into an array. None of them are to be displayed until the event requesting them.

Thanks,
Leo

Originally posted by b1randon

For sure. That will make your code 1000x easier. Just load all of your images into an array, then loop over changing the source as my first code block demonstrated. This is a much more controlled approach.

More on Eval

More on Eval

Comment

Comment

Comment

Comment

Comment

Comment