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.

• javascript
• dom-events

Share Improve this question Follow edited Jan 14, 2023 at 10:31 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 10, 2011 at 20:39 webdad3webdad3 9,1303131 gold badges128128 silver badges229229 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 the keypress event 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

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 2

Try 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"); })