Can I Avoid eval() Here?

Hi there

I am trying to assign an "onclick" event to a dynamically-created DOM
element (an image).

I have read countless times that "eval()" is to be avoided at all costs.
However, I cannot seem to get my new onclick to work without it.

Here's what I have so far:

myeval = 'detachFile(this);';
detachImage = getElementById('detach-jfhahhf');
detachImage.onclick = function() { eval(myeval) }

This works perfectly fine for me, but this is a web-app that will be
exposed to public users, and I obviously don't want them being able to
eval anything if i can help it.

Can that be done without the eval()? Many thanks.

Good Man wrote:

Quote:

I am trying to assign an "onclick" event to a dynamically-created DOM
element (an image).
>
Here's what I have so far:
>
myeval = 'detachFile(this);';
detachImage = getElementById('detach-jfhahhf');
detachImage.onclick = function() { eval(myeval) }
>
This works perfectly fine for me, but this is a web-app that will be
exposed to public users, and I obviously don't want them being able to
eval anything if i can help it.
>
Can that be done without the eval()? Many thanks.

var detachImage = document.getElementById('detach-jfhahhf');
detachImage.onclick = detachFile;

or (do not create intermediary variable):
document.getElementById('detach-jfhahhf').onclick = detachFile;

When image with "detach-jfhahhf" clicked, function detachFile is called
and [this] inside the function set to the clicked image.

P.S. I would also suggest do not use minus sign in ID name. camelCase
or underscore is more reliable.

"VK" <schools_ring@yahoo.comwrote in
news:1164319650.312018.210410@m7g2000cwm.googlegro ups.com:

Quote:

>Can that be done without the eval()? Many thanks.

>
var detachImage = document.getElementById('detach-jfhahhf');
detachImage.onclick = detachFile;
>
or (do not create intermediary variable):
document.getElementById('detach-jfhahhf').onclick = detachFile;
>
When image with "detach-jfhahhf" clicked, function detachFile is
called and [this] inside the function set to the clicked image.

hmmm... this doesn't seem to work for me?

assigning the onclick to "detachFile" doesn't work in terms of what I
need to get passed to the function ("this").

for example, if my detachFile() function is:

function detatchFile(field) {
alert(field);
}

my alert hands back "[object MouseEvent]" instead of "[object
HTMLImageElement]", which is what I want - I need the Image object
passed so I can determine it's ID and do various things to it....

Quote:

P.S. I would also suggest do not use minus sign in ID name. camelCase
or underscore is more reliable.

i just added it in this example to make it more readable :) really
there is no dash at all.

Thanks...

Good Man wrote:

Quote:

hmmm... this doesn't seem to work for me?
>
assigning the onclick to "detachFile" doesn't work in terms of what I
need to get passed to the function ("this").
>
for example, if my detachFile() function is:
>
function detatchFile(field) {
alert(field);
}
>
my alert hands back "[object MouseEvent]" instead of "[object
HTMLImageElement]", which is what I want - I need the Image object
passed so I can determine it's ID and do various things to it....

hmmm... :-) What browser are you testing on?

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script>
function detachFile() {
alert(this.tagName); // "BUTTON"
}

function init() {
document.getElementById('demo').onclick = detachFile;
}

window.onload = init;
</script>
</head>
<body>
<button id="demo">Click me</button>
</body>
</html>

If the problem remains, please post the whole page (or a link): there
is something else going on then.

"VK" <schools_ring@yahoo.comwrote in news:1164325775.251613.31260@
45g2000cws.googlegroups.com:

Quote:

>>my alert hands back "[object MouseEvent]" instead of "[object

>HTMLImageElement]", which is what I want - I need the Image object
>passed so I can determine it's ID and do various things to it....

>
hmmm... :-) What browser are you testing on?

hehe, the whole problem is making this work in IE. IE requires me to
assign onclick events via functions

thanks for your help, i solved it...

what started as:
myeval = 'detachFile(this);';
detachImage = getElementById('detach'+fileKey);
detachImage.onclick = function() { eval(myeval) }

can just be rewritten as:
detachImage = getElementById('detach'+fileKey);
detachImage.onclick = function() { detachFile(detachImage) }

Thanks again!

Good Man wrote:

Quote:

"VK" <schools_ring@yahoo.comwrote in news:1164325775.251613.31260@
45g2000cws.googlegroups.com:
>

Quote:

>my alert hands back "[object MouseEvent]" instead of "[object
HTMLImageElement]", which is what I want - I need the Image object
passed so I can determine it's ID and do various things to it....

hmmm... :-) What browser are you testing on?

>
hehe, the whole problem is making this work in IE. IE requires me to
assign onclick events via functions

How?

Quote:

thanks for your help, i solved it...

Badly.

Quote:

what started as:
myeval = 'detachFile(this);';
detachImage = getElementById('detach'+fileKey);
detachImage.onclick = function() { eval(myeval) }
>
can just be rewritten as:
detachImage = getElementById('detach'+fileKey);
detachImage.onclick = function() { detachFile(detachImage) }

Which creates a closure back to the detachImage variable. If you use
this in a loop to put onclick events on two or more elements, then all
of your onclick handlers will reference the last element associated
with detachImage.

Do it like this:

detachImage.onclick = function() { detachFile(this) }

And in detachFile:

function detachFile( refToElement) { ... }

refToElement will be set to a reference to the element that triggered
the event.

--
Rob

"RobG" <rgqld@iinet.net.auwrote in news:1164335309.561811.82520@
45g2000cws.googlegroups.com:

Quote:

>hehe, the whole problem is making this work in IE. IE requires me to
>assign onclick events via functions

>
How?

Well, though it may be improper, javascript as follows...

getElementById('myButton').onclick = "alert('hey now!');";

.... will give the element myButton an onclick event that gives you a
prompt saying 'hey now' in Firefox... but in IE, it does not, clicking
myButton won't do a thing. hence assigning it via a function

Quote:

>thanks for your help, i solved it...

>
Badly.

woohoo! im a sucker for criticism.

Quote:

>can just be rewritten as:
>detachImage = getElementById('detach'+fileKey);
>detachImage.onclick = function() { detachFile(detachImage) }

>
Which creates a closure back to the detachImage variable. If you use
this in a loop to put onclick events on two or more elements, then all
of your onclick handlers will reference the last element associated
with detachImage.

thanks, now I understand

Quote:

Do it like this:
>
detachImage.onclick = function() { detachFile(this) }
>
And in detachFile:
>
function detachFile( refToElement) { ... }
>
refToElement will be set to a reference to the element that triggered
the event.

excellent, i will try that tomorrow when i have the code back in front
of me. sure enough, all the "detachImage"s that exist in the document
when loaded (ie: ones NOT created on the fly) have: onclick="detachFile
(this);" , so my detachFile function looks like yours already. so that
makes good sense.

Thanks.

Can I Avoid eval() Here?

re: Can I Avoid eval() Here?

re: Can I Avoid eval() Here?

re: Can I Avoid eval() Here?

re: Can I Avoid eval() Here?

re: Can I Avoid eval() Here?

re: Can I Avoid eval() Here?

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about