Dynamically changing an elements onClick event

**dch31969** · 11-07-2007, 03:10 AM

I need to dynamically change the onClick event of an element. I just can't figure out how to.

**jscheuer1** · 11-07-2007, 05:17 AM

Change it entirely, or just a part of it?

If it is a hard coded onclick event, all you need to do is:

Code:

el.onclick=function(){whatever;};

**dch31969** · 11-08-2007, 01:25 AM

Originally Posted by jscheuer1

Change it entirely, or just a part of it?

If it is a hard coded onclick event, all you need to do is:

Code:

el.onclick=function(){whatever;};

Not working...

document.getElementById(targetHeaderText).onClick = "displayFolder(16)"

when I snoop it with msgbox immediately after it the msgbox shows displayFolder(16) however when I click the div nothing happens.

**jscheuer1** · 11-08-2007, 05:01 AM

In javascript, onclick is (as I wrote) all lower case:

Code:

document.getElementById(targetHeaderText).onclick = "displayFolder(16)"

Also, if targetHeaderText is the literal id of the element, it needs to be quoted within the document.getElementById() method, and you must assign as a function to pass parameters (also as I wrote):

Code:

document.getElementById('targetHeaderText').onclick = function(){displayFolder(16);};

Try out this demo:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
onload=function(){
document.getElementById('targetHeaderText').onclick = function(){displayFolder(16);};
}
function displayFolder(n){
alert(n);
}
</script>
</head>
<body>
<div id="targetHeaderText">Target Header Text</div>
</body>
</html>

**dch31969** · 11-08-2007, 12:03 PM

Originally Posted by jscheuer1

In javascript, onclick is (as I wrote) all lower case:

Code:

document.getElementById(targetHeaderText).onclick = "displayFolder(16)"

Also, if targetHeaderText is the literal id of the element, it needs to be quoted within the document.getElementById() method, and you must assign as a function to pass parameters (also as I wrote):

Code:

document.getElementById('targetHeaderText').onclick = function(){displayFolder(16);};

Try out this demo:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
onload=function(){
document.getElementById('targetHeaderText').onclick = function(){displayFolder(16);};
}
function displayFolder(n){
alert(n);
}
</script>
</head>
<body>
<div id="targetHeaderText">Target Header Text</div>
</body>
</html>

I need the example in VBScript as I'm keeping all the code in VBS. The HTML page is for an Outlook Folder Home Page and thus will never be viewed using Opera, Firefox!, or any browser other than a Microsoft produced one.

targetHeaderText is a variable passed into the function designating the specific <div> that will be updated.

**jscheuer1** · 11-08-2007, 04:39 PM

Originally Posted by dch31969

I need the example in VBScript as I'm keeping all the code in VBS. The HTML page is for an Outlook Folder . . .

Then you should have said so in the first place. I'm no expert in VBS. Moving thread to 'Other'.

**dch31969** · 11-08-2007, 05:38 PM

Originally Posted by jscheuer1

Then you should have said so in the first place. I'm no expert in VBS. Moving thread to 'Other'.

Sorry about that, the script is for a Folder Home Page which will replace my Outlook Today - I've been living in the world of VBScript.

**dch31969** · 11-09-2007, 12:49 AM

Ended up nesting a <span> into the <div> and then using code to update the div's innerHTML property. As in...

document.getElementById(targetHeaderText).innerHTML = "<span onClick='displayFolder(" & targetFolderConstant & ")'>" & targetFolder & "</span>"

Thread: Dynamically changing an elements onClick event

Thread Tools

Search Thread

Dynamically changing an elements onClick event

Bookmarks

Bookmarks

Posting Permissions