473,385 Members | 1,597 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

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.

Nov 23 '06 #1
6 3339
VK

Good Man wrote:
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.

Nov 23 '06 #2
"VK" <sc**********@yahoo.comwrote in
news:11**********************@m7g2000cwm.googlegro ups.com:

>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....

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...
Nov 23 '06 #3
VK

Good Man wrote:
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.

Nov 23 '06 #4
"VK" <sc**********@yahoo.comwrote in news:1164325775.251613.31260@
45g2000cws.googlegroups.com:
>>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!
Nov 24 '06 #5
Good Man wrote:
"VK" <sc**********@yahoo.comwrote in news:1164325775.251613.31260@
45g2000cws.googlegroups.com:
>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?

thanks for your help, i solved it...
Badly.
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

Nov 24 '06 #6
"RobG" <rg***@iinet.net.auwrote in news:1164335309.561811.82520@
45g2000cws.googlegroups.com:
>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

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

Badly.
woohoo! im a sucker for criticism.

>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
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.

Nov 24 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Reply Via Newsgroup | last post by:
This might sound sad... someone requesting a disertation on the 'eval' statement... but... I've been reading someone else's post - they had a huge calander like script and a handful of folk cursed...
7
by: David Laub | last post by:
I have stumbled across various Netscape issues, none of which appear to be solvable by tweaking the clientTarget or targetSchema properties. At this point, I'm not even interested in "solving"...
15
by: manstey | last post by:
Hi, I have a text file called a.txt: # comments I read it using this:
8
by: | last post by:
The problem lies here eval("document.TeeForm.amt.value(S+M)"); S and M suppose to add up and the total suppose to appear on the AMT field but it didn't. Any help? ...
3
by: Pauljh | last post by:
Hi All, I'm running some javascript over a server side generated web page and have multiple generated empty select statements, that I want to populate when the page is loaded. As HTML doesn't do...
7
by: Nick Wedd | last post by:
I have a string, $cookiestring, which typically looks like this: "us=1!uk=2!de=13!fr=8!". I want to use this to get values into an array $r, so that $r=1, $r=2, etc. Here is how I have achieved...
2
by: Florian Loitsch | last post by:
hi, What should be the output of the following code-snippet? === var x = "global"; function f() { var x = 0; eval("function x() { return false; }"); delete x; alert(x); }
6
by: RandomElle | last post by:
Hi there I'm hoping someone can help me out with the use of the Eval function. I am using Access2003 under WinXP Pro. I can successfully use the Eval function and get it to call any function with...
10
by: Gordon | last post by:
I have a script that creates new objects based on the value of a form field. Basically, the code looks like this. eval ('new ' + objType.value + '(val1, val2, val3'); objType is a select with...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.