JavaScript onKeyPress assigning problem

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,

Nico

Answer 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.

Answer 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