/    Sign up×
Community /Pin to ProfileBookmark

Another way to change action of event handler

Is there another way to change the action of an event handler (such as onClick) for an element via script besides assigning that element’s onclick “property” to a method?

i.e.

[code]
function test1() {
alert(“test 1”);
}

function test2() {
alert(“test 2”);
}

function change() {
document.getElementById(“myLink”).onclick = test2;
}

<p><a href=”#” id=”myLink” onclick=”test1();”>test</a></p>
<p><a href=”#” onClick=”change();”>change</a> </p>
[/code]

Is there a way to assign the new action by supplying the text that would be in the event handler? As an example, if I had the following code:

[code]
<input type=”button” name=”viewBtn” id=”viewBtn” value=”View” onClick=”openWin(‘file.jsp?fieldName=origField&propName=origProp’,’editwin’,’width=500,height=500,scrollbars’);”>
[/code]

but wanted to change the code in the onClick handler to be:

onClick=”openWin(‘file.jsp?fieldName=[B]newField[/B]&propName=[B]newProp[/B]‘,’editwin’,’width=500,height=500,scrollbars’);

Can I do this by somehow assigning a string to the onclick property?

i.e.

[code]
document.getElementById(“viewBtn”).onclick = someString;

// someString = “openWin(‘file.jsp?fieldName=newField&propName=newProp’,’editwin’,’width=500,height=500,scrollbars’)”;
[/code]

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@wood_tahauthorJan 06.2005 — Something that just occurred to me is that if I end up using the above method, I believe that if the document is reloaded, I will lose the changes that I had just made.

So my other option is to modify it via the innerHTML property (which I am pretty sure will stay on a document reload -- please correct me if I am wrong). Does anyone know of an easy way to target and replace the contents of an element's attributes using this property other than doing a substring and a replace?
Copy linkTweet thisAlerts:
@ralbrittonJan 06.2005 — I would have some global variables in the header script, and then use those variables to call a function, since you are doing so anyway. Then, you can pass those variables in the url search as needed. For example:

[CODE]
<head>
<script ...>
var vwField;
var vwProp;

function popWin (Field, Prop) {
openWin('file.jsp?fieldName=' + Field + '&propName=' + Prop + ','editwin','width=500,height=500 ,scrollbars');
}
</script>
</head>
<body>
<script...>
var querystrings = window.location.search;
vwField = getQstring(querystrings, "fieldName")
vwProp = getQstring(querystrings, "propName")
</script>

<input type='button' name='viewBtn' id='viewBtn' value='View' onClick='popWin(vwField,vwProp);'>

</body>

[/CODE]


You'll need a way to set the vwField and vwProp values initially. I'm not sure what you are trying to do with just one link and going to multiple places, but my guess is that you are having the user pick a value in a dropdown or selection box and click the View button. Then, in the onChange event of that field you can set the vwField and vwProp values.

(I wrote the code from scratch, so it may not be correct.)
×

Success!

Help @wood_tah spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...