Button handling and layer visibility in Greasemonkey

I have a Greasemonkey script that I've been building for a game. The idea is to have info about the game in a div that will pop up when a button (which is added by my script) on the page is clicked.

I'm using z-index because when I just display the div over the top of the game screen, some of the images show through. So, basically what I need to do is change the z-index of my div based on the value 开发者_如何学Goof a variable and/or button click. However, I cannot get my div to come to the front when I click my button.

Here's what I have so far:

// ==UserScript==
// @name            Test Script
// @namespace       http://therealmsbeyond.com/
// @description     Test
// @include         an_include.js
// @include         another_include.js
// @require         json.js
// ==/UserScript==

var VERSION = 1;
var WEBSITEURL = 'http://therealmsbeyond.com/';
var SCRIPTNAME = 'Test';
var SENDINFODELAY = 600000;
var UPDATEDELAY = 604800000;

var ZINDEX_UNDER = -100;
var ZINDEX_OVER = 111111;

var Options = {
    'mapVisible' : false,
    'showHostile' : false,
    'showAlliance' : false,
    'showBookmarks' : false
}

function custom_setValue(k,v){
    GM_setValue(k,v);
}
function custom_getValue(k,dv){
    return(GM_getValue(k,dv));
}
function custom_deleteValue(k){
    GM_deleteValue(k);
}
function getSavedInfo(){
    return(custom_getValue('ajaxparams',null));
}
function getSavedServerId(){
    return(custom_getValue('sid'));
}

var e = document.createElement('div');
    var idAttr = document.createAttribute('id');
    var styleAttr = document.createAttribute('style');
    idAttr.nodeValue = 'shadow_map_container';
    styleAttr.nodeValue = 'background-color:white;top:150px;left:75px;position:absolute;height:600px;width:600px;';
    e.setAttributeNode(idAttr);
    e.setAttributeNode(styleAttr);

    var c = '<strong>This is the map window.</strong>';
    e.innerHTML = c;
    document.body.appendChild(e);

if(Options.mapVisible == true)
{
    document.getElementById('shadow_map_container').style.zIndex = ZINDEX_OVER;
}
else
{
    document.getElementById('shadow_map_container').style.zIndex = ZINDEX_UNDER;
}

function showHide()
{
    if(Options.mapVisible == true)
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_UNDER;
        Options.mapVisible = false;
    }
    else
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_OVER;
        Options.mapVisible = true;
    }
}

var btnStr = '<a class="navTab" target="_top" onclick="showHide();return false;" href="javascript:void(0)"><span>Shadow Mapper</span></a>';
var myNavContainer = document.getElementById('main_engagement_tabs');
var inner = myNavContainer.innerHTML;
var newStr = btnStr + inner;
myNavContainer.innerHTML = newStr;

---

This is not a z-index problem, it's a coding style and event-listener problem.

You cannot activate a button that way in a Greasemonkey script. showHide() resides in the GM sandbox, the page's JS cannot reach it from an onclick.
(One more, of many, reasons why inline JS should be avoided.)

In this example, you would activate the link like so:

function showHide()
{
    if(Options.mapVisible == true)
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_UNDER;
        Options.mapVisible = false;
    }
    else
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_OVER;
        Options.mapVisible = true;
    }
    return false;
}

var btnStr = '<a class="navTab" target="_top"><span>Shadow Mapper</span></a>';
var myNavContainer = document.getElementById('main_engagement_tabs');
var inner = myNavContainer.innerHTML;
var newStr = btnStr + inner;
myNavContainer.innerHTML = newStr;

var btn = document.querySelector (".main_engagement_tabs > a.navTab");
btn.addEventListener ("click", showHide, true);