Log in

View Full Version : 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:


el.onclick=function(){whatever;};
dch31969
11-08-2007, 01:25 AM
Change it entirely, or just a part of it?

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


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:


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


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

Try out this demo:


<!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
In javascript, onclick is (as I wrote) all lower case:


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


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

Try out this demo:


<!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
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
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>"