I am trying to apply an event to a element dynamically to my application.
When I used onclick I get an alert to pop:
el.setAttribute('onclick', 'alert("hi")',0);
When I try to use the onkeypress nothing happens:
el.setAttribute('onkeypress', 'alert("Hi");',0);
I really need to have the onkeypress available. Is there something that I'm doing incorrectly? Is setAttribute not the best way to achieve what I'm doing? If so what are my alternatives to dynamically setting an event on a specific element?
UPDATE:
To answer a few of the questions below when I do:
el.setAttribute('onkeypress','numericOverride(this)',0);
When I look at the source in Firebug I see the following:
<div id="objSCR" class="txtbox" onmousedown="pfocus(this, '', '');" style="color:#0000FF; width:62px; height:12px; top:76px; left:120px; text-align:right; color:#0000FF;" ptmulti="false" pttype="E" ptlayndx="4" ptdisp="false" ppopup="" plength="12" onchange="numericOverride(this)">4000.00</div>
However, when I change the value of the text I get now output from this function:
function numericOverride(val){
console.log('hello');
}
When I attempt to do the following:
el.onchange = function() { numericOverride(this) }
Nothing gets added to the div and I get no result from the function.
I am trying to apply an event to a element dynamically to my application.
When I used onclick I get an alert to pop:
el.setAttribute('onclick', 'alert("hi")',0);
When I try to use the onkeypress nothing happens:
el.setAttribute('onkeypress', 'alert("Hi");',0);
I really need to have the onkeypress available. Is there something that I'm doing incorrectly? Is setAttribute not the best way to achieve what I'm doing? If so what are my alternatives to dynamically setting an event on a specific element?
UPDATE:
To answer a few of the questions below when I do:
el.setAttribute('onkeypress','numericOverride(this)',0);
When I look at the source in Firebug I see the following:
<div id="objSCR" class="txtbox" onmousedown="pfocus(this, '', '');" style="color:#0000FF; width:62px; height:12px; top:76px; left:120px; text-align:right; color:#0000FF;" ptmulti="false" pttype="E" ptlayndx="4" ptdisp="false" ppopup="" plength="12" onchange="numericOverride(this)">4000.00</div>
However, when I change the value of the text I get now output from this function:
function numericOverride(val){
console.log('hello');
}
When I attempt to do the following:
el.onchange = function() { numericOverride(this) }
Nothing gets added to the div and I get no result from the function.
Share Improve this question edited Jan 14, 2023 at 10:31 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Aug 10, 2011 at 20:39 webdad3webdad3 9,13031 gold badges128 silver badges229 bronze badges 7- 1 EventListener isn't an option? It does look like this is what you need... – Pier-Olivier Thibault Commented Aug 10, 2011 at 20:40
- You want to set the DOM property, not the attribute. Attributes are set via HTML (as a default state). – user1385191 Commented Aug 10, 2011 at 21:21
- @Matt - How do you set the DOM property? – webdad3 Commented Aug 10, 2011 at 21:24
-
Is there a reason you want to stick to
setAttribute? If not, see my answer below which lets you attach thekeypressevent correctly for all major browsers. – Mrchief Commented Aug 10, 2011 at 21:34 - @Mrcheif - I'm looking at ways to use your code. I think there might be an issue with my application and I just need to find where to apply your code. Thank you for yours and everyones efforts. – webdad3 Commented Aug 10, 2011 at 21:38
4 Answers
Reset to default 2Try this (its cross browser):
function keyPressHandler() { alert("Hi"); };
if (el.addEventListener) {
el.addEventListener("keypress", keyPressHandler, true);
}
else if (el.attachEvent) {
el.attachEvent("onkeypress", keyPressHandler);
}
else {
el.onkeypress = keyPressHandler;
}
Demo (note jsfiddle doesn't play well in IE 7): http://jsfiddle/mrchief/BQxWp/2/
Tested in Chrome, FF5, IE7 (after retrying couple of times) and IE9.
What is the type of element that you are trying to attach the event handler to? The onkeypress event is only supported by the following tags:
<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>,
<h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>,
<p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>,
<tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
http://www.w3schools./jsref/event_onkeypress.asp
you should set the event listener in the proper manner:
el.onkeypress = function() { alert("HI") }
Have you considered using event listeners ?
target.addEventListener("click", function() { alert("Hi"); })