context menu does not appear inside asp.net Iframe

Question

I have a little issue , I worked on a context menu in Vanilla Javascript for my ASP.NET application. When i use it there is no error message, but nothing show up. The context menu is suposed to work on a Content Editable when I create Spans around the word i need it to work. Here is the word generated with span around

<span id="0" class="underlineWord" oncontextmenu="rightClickMustWork(this);">test</span>

Here is the context menu in Javascript :

function rightClickMustWork(element) {
var x = document.getElementById('ctxMenu1');
if (x) x.parentNode.removeChild(x);
alert("1");
var d = document.createElement('div');
d.setAttribute('class', 'ctxMenu');
d.setAttribute('id', 'ctxMenu1');
element.parentNode.appendChild(d);
d.onmouseover = function (e) {
    this.style.cursor = 'pointer';
}
alert("2");
d.onclick = function (e) {
    if (document.getElementById("ctxMenu1") != null) {
        element.parentNode.removeChild(d);
    }
}
alert("3");
document.body.onclick = function (e) {
    if (document.getElementById("ctxMenu1") != null) {
        element.parentNode.removeChild(d);
    }
}
alert("4");
for (i = 0; i < 5; ++i) {
    var p = document.createElement('p');
    d.appendChild(p);
    p.setAttribute('class', 'ctxLine');
    p.setAttribute('onclick', 'alert("the action will be here if it worked")');
    p.innerHTML = "test";
}
alert("5");

}

and the CSS of this Context Menu :

        .ctxMenu
    {
        position: absolute;
        min-width: 8em;
        height: auto;
        padding: 0px;
        margin: 0;
        margin-left: 0.5em;
        margin-top: 0.5em;
        border: 1px solid black;
        background: #F8F8F8;
        z-index: 11;
        overflow: visible;
    }
    .ctxLine
    {
        display: block;
        margin: 0px;
        padding: 2px 2px 2px 8px;
        border: 1px solid #F8F8F8;
        font-size: 1em;
        font-family: Arial, Helvetica, sans-serif;
        overflow: visible;
    }
    .ctxLine:hover
    {
        border: 1px solid #BBB;
        background-color: #F0F0F0;
        background-repeat: repeat-x;
    }

When i try it, I go through all the alert with a number, but nothing show up. I don't know what i'm missing. (The content editable is Inside an Iframe, but i don't think this might cause an issue because all alert are played).

Answer 1

Well.. It may be a little frustrating.

The problem was in a letter: p.innerHTMl = "test"; instead of p.innerHTML = "test";

Also, I was added event.preventDefault() to avoid the browser context menu.

function rightClickMustWork(element, event) {
  event.preventDefault();
   var x = document.getElementById('ctxMenu1');
   if (x) x.parentNode.removeChild(x);
   //alert("1");
   var d = document.createElement('div');
   d.setAttribute('class', 'ctxMenu');
   d.setAttribute('id', 'ctxMenu1');
   element.parentNode.appendChild(d);
   d.onmouseover = function (e) {
       this.style.cursor = 'pointer';
   }
   //alert("2");
   d.onclick = function (e) {
       if (document.getElementById("ctxMenu1") != null) {
           element.parentNode.removeChild(d);
       }
   }
   //alert("3");
   document.body.onclick = function (e) {
       if (document.getElementById("ctxMenu1") != null) {
           element.parentNode.removeChild(d);
       }
   }
   //alert("4");
   for (i = 0; i < 5; ++i) {
       var p = document.createElement('p');
       d.appendChild(p);
       p.setAttribute('class', 'ctxLine');
       p.setAttribute('onclick', 'alert("the action will be here if it worked")');
       // was p.innerHTMl = "test";
       p.innerHTML = "test";
   }
   //alert("5");
}

 .ctxMenu
    {
        position: absolute;
        min-width: 8em;
        height: auto;
        padding: 0px;
        margin: 0;
        margin-left: 0.5em;
        margin-top: 0.5em;
        border: 1px solid black;
        background: #F8F8F8;
        z-index: 11;
        overflow: visible;
    }
    .ctxLine
    {
        display: block;
        margin: 0px;
        padding: 2px 2px 2px 8px;
        border: 1px solid #F8F8F8;
        font-size: 1em;
        font-family: Arial, Helvetica, sans-serif;
        overflow: visible;
    }
    .ctxLine:hover
    {
        border: 1px solid #BBB;
        background-color: #F0F0F0;
        background-repeat: repeat-x;
    }

<span id="0" class="underlineWord" oncontextmenu="rightClickMustWork(this, event);">test</span>