Dynamic onclick event

G

getsanjay.sharma

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

ASM

(e-mail address 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);
Click to expand...

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);
}
 
G

getsanjay.sharma

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);

}
Click to expand...

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?
 
R

RobG

Perhaps :
document.getElementById("btnOne").onclick = 'doSomething(200)';
Click to expand...
Certainly :
document.getElementById("btnOne").onclick = function() {
doSomething(200);
}
Click to expand...
or :
document.getElementById("btnOne").onclick=Function('doSomething(200)');
Click to expand...
May be :
document.getElementById("btnTwo").addEventListener("onclick",
"doSomething(200)",
true);
Click to expand...
}
Click to expand...

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?
Click to expand...

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

ASM

(e-mail address 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); }
Click to expand...
Any suggestions?
Click to expand...


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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascrip code wont run properly. 2
Song requests 4
Uhhhhh, What can I do next? 6
Two events one onclick 1
Script stops working when using variables to save time typing... 4
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Why doesn't the function get called? 1
Help me sort out this script 1

Members online

No members online now.
Total: 26 (members: 2, guests: 24)
Robots: 452

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top