Question

I tried using the code below to set up a contextmenu which only displays when the container div is clicked. But I am pretty messed up. If it helps here is the fiddle http://jsfiddle.net/PhilippB/SMKMW/1/.

var container = document.getElementById("container");
var contextmenu = document.getElementById("contextmenu");

container.onclick = function() {contextmenu()} ;
contextmenu.style.display = "none";

function contextmenu(event) {
    if (contextmenu.style.display == "none") {
        contextmenu.style.display = "block";
        contextmenu.style.left = event.pageX + "px";
        contextmenu.style.top = event.pageY + "px";
    }
    else {
        contextmenu.style.display = "none";
    }
}​

Answer 1

You have a couple of strange things going on, so it isn’t entirely clear to me what you’re after.

• You have 2 different variables named ‘contextmenu’. The first is when you do a getElementById, the second when you define the contextmenu function.
• Your JS Fiddle example doesn’t match your example above, and it contains an error in the IF statement (you only use 1 = not 2). In fact, your JSFiddle example is very different from your above example
• In your example, the only content inside container is contextmenu, but you start it off with display: none, so it’s hard to know what to click to get it to show.

Try this updated version of your JSFiddle (http://jsfiddle.net/SMKMW/2/)

var container = document.getElementById("container");
var contextmenuElement = document.getElementById("contextmenu");

container.onclick = function() {contextmenu()} ;
contextmenuElement.style.display = 'none';

function contextmenu(event) {

    var container = document.getElementById("container");

    if (contextmenuElement.style.display == "block") {
        contextmenuElement.style.display = "none";
    }
    else {
        contextmenuElement.style.display = "block";
    }

}