Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Dynamic onclick event

Reply
Thread Tools

Dynamic onclick event

 
 
getsanjay.sharma@gmail.com
Guest
Posts: n/a
 
      05-13-2007
Is there any way I can attach a function dynamically which takes some
parameters ?

<html>
<head>
<script>
doSomething = function(x)
{
alert(x);
}

reattach = function()
{
// doesn't work
document.getElementById("btnOne").onclick = doSomething(200);

// neither does this
document.getElementById("btnTwo").addEventListener ("onclick",
doSomething(200), true);
}
</script>
</head>
<body>
<form>
<input type="button" name="btnOne" id="btnOne"
onclick="doSomething(2)" value="One" />
<br />
<br />
<input type="button" name="btnTwo" id="btnTwo" onclick="reattach()"
value="Dynamic" />
</form>
</body>
</html>

By using the first syntax I just end up executing the function.

By using the addEventListener function I get some weird error like:
"uncaught exception: [Exception... "Could not convert JavaScript
argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"
location: "JS frame ::"

Any help is greatly appreciated.

 
Reply With Quote
 
 
 
 
ASM
Guest
Posts: n/a
 
      05-13-2007
http://www.velocityreviews.com/forums/(E-Mail Removed) a écrit :
> Is there any way I can attach a function dynamically which takes some
> parameters ?
>
> <html>
> <head>
> <script>
> doSomething = function(x)
> {
> alert(x);
> }
>
> reattach = function()
> {
> // doesn't work
> document.getElementById("btnOne").onclick = doSomething(200);


Perhaps :
document.getElementById("btnOne").onclick = 'doSomething(200)';

Certainly :
document.getElementById("btnOne").onclick = function() {
doSomething(200);
}

or :
document.getElementById("btnOne").onclick=Function ('doSomething(200)');


May be :
document.getElementById("btnTwo").addEventListener ("onclick",
"doSomething(200)",
true);
}


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
 
Reply With Quote
 
 
 
 
getsanjay.sharma@gmail.com
Guest
Posts: n/a
 
      05-13-2007
> Perhaps :
> document.getElementById("btnOne").onclick = 'doSomething(200)';
>
> Certainly :
> document.getElementById("btnOne").onclick = function() {
> doSomething(200);
> }
>
> or :
> document.getElementById("btnOne").onclick=Function ('doSomething(200)');
>
> May be :
> document.getElementById("btnTwo").addEventListener ("onclick",
> "doSomething(200)",
> true);
>
> }


What if a variable is used inside the function instead of a literal ?
Like doSomething(myVar) ? I guues I am facing some scoping problems
when using your second approach.

var i = 100;
document.getElementById("btnOne").onclick = function()
{ doSomething(i); }

For some weird reason, it can't read the value of i inside the
function scope and it always shows blank. Then I tried using:

var i = 100;
document.getElementById("btnOne").onclick = function(i)
{ doSomething(i); }

The above approach always gives 'i' the value of 'document.mouseevent'
for no good reason.

And the attachEventListener method as usual gives me this error:
"uncaught exception: [Exception... "Could not convert JavaScript
argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"
location: "JS frame ::"

Any suggestions?


 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      05-13-2007
On May 14, 5:31 am, (E-Mail Removed) wrote:
> > Perhaps :
> > document.getElementById("btnOne").onclick = 'doSomething(200)';

>
> > Certainly :
> > document.getElementById("btnOne").onclick = function() {
> > doSomething(200);
> > }

>
> > or :
> > document.getElementById("btnOne").onclick=Function ('doSomething(200)');

>
> > May be :
> > document.getElementById("btnTwo").addEventListener ("onclick",
> > "doSomething(200)",
> > true);

>
> > }

>
> What if a variable is used inside the function instead of a literal ?
> Like doSomething(myVar) ? I guues I am facing some scoping problems
> when using your second approach.
>
> var i = 100;
> document.getElementById("btnOne").onclick = function()
> { doSomething(i); }
>
> For some weird reason, it can't read the value of i inside the
> function scope and it always shows blank. Then I tried using:
>
> var i = 100;
> document.getElementById("btnOne").onclick = function(i)
> { doSomething(i); }
>
> The above approach always gives 'i' the value of 'document.mouseevent'
> for no good reason.
>
> And the attachEventListener method as usual gives me this error:
> "uncaught exception: [Exception... "Could not convert JavaScript
> argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"
> location: "JS frame ::"
>
> Any suggestions?


You have discovered a number of things in regard to events and
closures. A good introductoin to events is at Quirskmode, and to
closures in the FAQ notes (see links below):

Quirksmode: Introduction to events (there are many pages, read them
all):
<URL: http://www.quirksmode.org/js/introevents.html >

Closures (rather long and detailed but it's all good stuff):
<URL: http://www.jibbering.com/faq/faq_notes/closures.html >


--
Rob

 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      05-13-2007
(E-Mail Removed) a écrit :
>
> What if a variable is used inside the function instead of a literal ?
> Like doSomething(myVar) ? I guues I am facing some scoping problems
> when using your second approach.
>
> var i = 100;
> document.getElementById("btnOne").onclick = function()
> { doSomething(i); }


> Any suggestions?



var i = 200;
document.getElementById("btnOne").onclick=Function ('doSomething("'+i+'")');


<html>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function addOnClick(){
for(var i=1; i<=5; i++) {
$('field'+i).onclick = Function('alarm("field'+i+'")');
$('field'+i).style.cursor = 'pointer';
}
}
function alarm(txt) {
alert('Yes it is the field :\n\t\t\t'+txt);
alert('Verification : '+$(txt).id);
}
onload = addOnClick;
</script>
<p id="field1"> click 1 </p>
<p id="field2"> click 2 </p>
<p id="field3"> click 3 </p>
<p id="field4"> click 4 </p>
<p id="field5"> click 5 </p>
</html>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to handle both onmouseup event and onClick event JerryG ASP .Net 0 12-20-2005 03:49 AM
button.onclick = new Function("func2()") + button.onclick foldface@yahoo.co.uk Javascript 2 09-26-2005 08:13 AM
Dynamic control and onClick event Server-side RA ASP .Net 5 04-01-2005 03:11 PM
dynamic button onclick event not working Dipin Javascript 4 08-27-2003 08:53 PM
document.onclick=doIt() same as document.onclick=doIt ? bob Javascript 3 08-21-2003 12:14 PM



Advertisments