自定义对象单击监听器错误

Question

我正在制作一个带有自定义Menu和MenuButton对象的网站，我有方法在MenuButtons上创建和设置onClick侦听器

然而，当我运行代码时，只有菜单对象上的LAST按钮有一个有效的onClick？我已经调试了一下，并且正在添加听众？只是最后一个menuButton运行onClick函数？ （使用console.log）

例如在MAIN_MENU上，我只能打开CREDITS_MENU而不能打开OPTIONS_MENU？

示例网站：http://prototypegame.co.nf/Menu/ 对象：

GAME_MENU = new Object();
GAME_MENU.CURRENT = null;
GAME_MENU.element = document.getElementById('menu');
GAME_MENU.hide =
    function hideGameMenu(){
        if(this.element == null)
            this.element = document.getElementById('menu');
        this.element.style.visibility = 'hidden';
    };
GAME_MENU.show =
    function showGameMenu(){
        if(this.element == null)
            this.element = document.getElementById('menu');
        this.element.style.visibility = 'visible';
    };
function Menu(title){
    this.id = "menu";
    this.title = title;
    this.items = [];
    this.titleId = 'menuTitle';
    this.element = document.getElementById(this.id);
    this.titleElement = document.getElementById(this.titleId);
    this.itemsElement = document.getElementById('items');
    this.setTitle =
    function setMenuTitle(string){
        this.title = string;
        this.titleElement.innerHTML = this.title;
    };
    this.addMenuItem =
    function addButtonToMenu(button){
        this.items.push(button);
        if(this==GAME_MENU.CURRENT){
            if(button.onClick!=null){
                this.itemsElement.innerHTML += createButtonDiv(button.id,button.backgroundColor,button.text);
                button.setListener();
            }else{
                this.itemsElement.innerHTML += createTextDiv(button.id,button.backgroundColor,button.text);
            }
        }
        return true;
    };
    this.removeMenu =
    function removeButtonFromMenu(button){
        for(var x=0;x<this.items.length;x++){
            if(this.items[x]==button){
                this.items.splice(x, 1);
                if(this==GAME_MENU.CURRENT){
                    document.getElementById(button.id).parentNode.removeChild(button.element);
                    button.removeListener();
                }
                return true;
            }
        }
    return false;
    };
    this.setCurrentMenu =
    function menuSetCurrentMenu(){
        GAME_MENU.CURRENT = this;
        //set menu stuff
        this.setTitle(this.title);
        //remove items
        this.itemsElement.innerHTML = "";
        //set items
        for(var x=0;x<this.items.length;x++){
            var btn = this.items[x];
            console.log(btn);
            if(btn.onClick!=null){
                this.itemsElement.innerHTML += createButtonDiv(btn.id,btn.backgroundColor,btn.text);
                btn.setListener();
            }else
                this.itemsElement.innerHTML += createTextDiv(btn.id,btn.backgroundColor,btn.text);
        }
    };
    if(GAME_MENU.CURRENT == null){
        this.setCurrentMenu();
    }
}
function MenuButton(id,text,backgroundColor,onClick){
    this.id = id;
    this.text = text;
    this.backgroundColor = backgroundColor;
    this.element = null;
    this.onClick = onClick;
    this.setListener =
    function setButtonListener(){
        this.element = document.getElementById(this.id);
        this.element.addEventListener('click',this.onClick,false);
        console.log(this.text+' EL: added');
    };
    this.removeListener =
    function removeButtonListener(){
        if(this.onClick==null)
            return;
            try{
                this.element.removeEventListener('click',this.onClick,false);
            }catch(e){}
    };
}
function createButtonDiv(id,color,text){
    //Build Element
    if(id==null)
        id="";
    return "<div id='"+id+"' class='menuButton' style='background-color:"+color+";'>"+text+"</div>";
}
function createTextDiv(id,color,text){
    //Build Element
    if(id==null)
        id="";
    return "<div id='"+id+"' class='menuText' style='background-color:"+color+";'>"+text+"</div>";
}
function none(){}

初始化GAME_MENU：

musicOn = true;
SFXOn = true;
function startMenu(){
    //MAIN MENU
    MAIN_MENU = new Menu('Random Brawl');
    MAIN_MENU.addMenuItem(new MenuButton('storyModeBtn','STORY MODE','#0CF'));
    MAIN_MENU.addMenuItem(new MenuButton('survivalModeBtn','SURVIVAL MODE','red'));
    MAIN_MENU.addMenuItem(new MenuButton('multiplayerModeBtn','MULTIPLAYER','green'));
    MAIN_MENU.addMenuItem(new MenuButton('optionsBtn','OPTIONS','gray',OPEN_OPTIONS));
    //MAIN_MENU.addMenuItem(new MenuButton('creditsBtn','CREDITS','blue',OPEN_CREDITS));
    //Credits
    CREDITS_MENU = new Menu('Credits');

    CREDITS_MENU.addMenuItem(new MenuButton(null,'LEAD PROGRAMMER','green'));
    CREDITS_MENU.addMenuItem(new MenuButton(null,'<a href="mailto:yudechn@gmail.com?Subject=Random%20Brawl" target="_blank">Victor Chen</a>','green'));
    CREDITS_MENU.addMenuItem(new MenuButton(null,'LEAD ARTIST','blue'));
    CREDITS_MENU.addMenuItem(new MenuButton(null,'Hugh Chen','blue'));
    CREDITS_MENU.addMenuItem(BACK_BTN);
    //Options
    OPTIONS_MENU = new Menu('Options');

    OPTIONS_MENU.addMenuItem(new MenuButton('toggleMusic','Music: ON','blue',toggleMusic));
    OPTIONS_MENU.addMenuItem(new MenuButton('toggleSFX','SFX: ON','blue',toggleSFX));
    OPTIONS_MENU.addMenuItem(BACK_BTN);
}
function OPEN_CREDITS(){
    console.log('Credits Menu');
    CREDITS_MENU.setCurrentMenu();
}
function OPEN_OPTIONS(){
    console.log('Options Menu');
    OPTIONS_MENU.setCurrentMenu();
}
function BACK(){
    console.log('Main Menu');
    MAIN_MENU.setCurrentMenu();
}
function toggleMusic(){
    var element = document.getElementById('toggleMusic');
    if(musicOn){
        element.innerHTML = 'Music: OFF';
    }else{
        element.innerHTML = 'Music:  ON';
    }
    musicOn = !musicOn;
}
function toggleSFX(){
    var element = document.getElementById('toggleSFX');
    if(SFXOn){
        element.innerHTML = 'SFX: OFF';
    }else{
        element.innerHTML = 'SFX:  ON';
    }
    SFXOn = !SFXOn;
}
//Buttons
BACK_BTN = new MenuButton('back','BACK','red',BACK);