JavaScript onKeyPress assigning string

Question

I am trying to add an onKeyPress event to a dynamically created html element using JavaScript. In practise, the element is added, the id is assigned, and the innerHTML added, but the onmouseover, onmouseout, and onKeyPress (2nd last line) events are not added to the element. The last line (.focus()) does work.

Code:

function newParagraphAfter(elem)
{
blockElemId++;
newPara = document.createElement("p");
newPara.id = 'block_' + blockElemId;
newPara.contentEditable = 'true';
newPara.onmouseover = "this.style.border='1px dashed white';";
newPara.onmouseout = "this.style.border='none';";
newPara.innerHTML = "Edit Here!";
elem.parentNode.insertBefore(newPara, elem.nextSibling);
document.getElementById('block_' + blockElemId).onKeyPress = "return editKeypress(this, event)";
document.getElementById('block_' + blockElemId).focus();
}

Any help greatly appreciated.

mfeingold · Accepted Answer · 2009-10-09 21:52:44Z

2

I do not think you can assign strings to event handlers - Javascript can coerce data but not to this degree. What you need to do instead is write you code as a function and then assign the function to the event handler

answered Oct 9, 2009 at 21:52

mfeingold

7,1344 gold badges39 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gordon Tucker · Accepted Answer · 2009-10-12 14:51:11Z

1

Lowercase your onKeyPress and use a function

document.getElementById('block_' + blockElemId).onkeypress = function(e) {
    if(!e) e = event;
    return editKeypress(this, event)
};

Edit: Added bobince's advice for a more cross-browser friendly answer.

edited Oct 12, 2009 at 14:51

answered Oct 9, 2009 at 21:50

Gordon Tucker

6,8043 gold badges30 silver badges41 bronze badges

2 Comments

Nico Burns Over a year ago

Thanks a lot Gordon, I'd always wondered what the point of those anonymous functions was.

bobince Over a year ago

This will only work on IE, due to the global window.event. Everywhere else, the event is passed in as an argument to the handler function. You should just set newPara.onkeypress= editKeypress, and in editKeypress check for an argument. ie. traditionally: function editKeypress(e) { if (!e) e= window.event; ...

Collectives™ on Stack Overflow

JavaScript onKeyPress assigning string

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related