JavaScript 中的事件单击未触发函数

Question

这是我之前的问题"Creating and Calling Events in Javascript" 的后续。我使用纯 JS 创建了一个按钮，并为其分配了一个事件 (welcomePlayer) 和一个事件处理程序。不幸的是，当我点击btnPlayer 时，什么也没有发生。 startGame 函数中是否有一些东西会干扰按钮的行为，或者我是否遗漏了一些简单的东西？

<div id="story"></div>
<button type="button" id="BTN_Start" onclick="startGame('story');">Start Game</button>

function startGame(divName) {
    //The UI
    //The story div
    var myDiv = '';
    //Create and append player label
    var lblPlayer = '';
    //Create and append select list
    var ddlPlayer = '';
    //Create the default, invalid choice
    var defOpt = '';
    //Create the "Choose this character" button
    var btnPlayer = '';
    myDiv = document.getElementById('story');

    lblPlayer = document.createElement('label');
    lblPlayer.id = 'LBL_Player';
    lblPlayer.htmlFor = 'DDL_PlayerChar';
    lblPlayer.innerHTML = 'Please select a character. ';
    myDiv.appendChild(lblPlayer);

    ddlPlayer = document.createElement('select');
    ddlPlayer.id = 'DDL_PlayerChar';
    myDiv.appendChild(ddlPlayer);

    defOpt = document.createElement("option");
    defOpt.value = 0;
    defOpt.text = 'Select...';
    ddlPlayer.appendChild(defOpt);

    //Create and append the options
    for (var i = 0; i < charFirstNames.length; i++) {
        var option = document.createElement("option");
        option.value = charFirstNames[i] + '_' + charLastNames[i];
        option.text = charFirstNames[i] + ' ' + charLastNames[i];
        ddlPlayer.appendChild(option);
    }

    btnPlayer = document.createElement('button');
    btnPlayer.id = 'BTN_Player';
    btnPlayer.type = 'button';
    btnPlayer.onclick = welcomePlayer;
    btnPlayer.innerHTML = 'Select This Character!';
    myDiv.appendChild(btnPlayer);

    document.getElementById('BTN_Start').hidden = true;
}

function welcomePlayer() {
    var myDiv = '';
    var lbl1stGuest = '';
    var ddl1stGuest = '';
    var btn1stGuest = '';

    //Use the selected index of the player dropdown list to assign title, first name, and last name to a new character object called Player
    if (ddlPlayer.options[ddlPlayer.selectedIndex].value != '0') {
        objPlayer = new Character();
        objPlayer.Title = charTitles[ddlPlayer.options[ddlPlayer.selectedIndex].text];
        objPlayer.FirstName = charFirstNames[ddlPlayer.options[ddlPlayer.selectedIndex].text];
        objPlayer.LastName = charLastNames[ddlPlayer.options[ddlPlayer.selectedIndex].text];
        objPlayer.IsPlayer = true;
    }
    //Find the div again to "invite" the first guest and remove player creation UI
    myDiv = document.getElementById('story');
    //Test the Player object
    //myDiv.innerHTML = '<p>Hello, ' + objPlayer.Title + ' ' + objPlayer.LastName + '!';

    //Remove the player creation UI
    lblPlayer.hidden = true;
    ddlPlayer.hidden = true;
    btnPlayer.hidden = true;

    lbl1stGuest = document.createElement('label');
    lbl1stGuest.id = 'LBL_1stGuest';
    lbl1stGuest.htmlFor = 'DDL_1stGuest';
    lbl1stGuest.innerHTML = 'Who would you like to invite first?';
    myDiv.appendChild(lbl1stGuest);

    ddl1stGuest = document.createElement('select');
    ddl1stGuest.id = 'DDL_1stGuest';
    myDiv.appendChild(ddl1stGuest);

    defOpt = document.createElement("option");
    defOpt.value = 0;
    defOpt.text = 'Select...';
    ddl1stGuest.appendChild(defOpt);

    //Create and append the options
    for (var i = 0; i < charFirstNames.length; i++) {
        var guestList = [];
        guestList.push(charFirstNames[i]);
        if (objPlayer.FirstName === guestList[i]) {
            guestList.splice(i);
        }

        for (var j = 0; j < guestList.length; j++) {
            for (var k = guestList[j]; k = charFirstNames[j]; k++) {
                var option = document.createElement("option");
                option.value = charFirstNames[i] + '_' + charLastNames[i];
                option.text = charFirstNames[i] + ' ' + charLastNames[i];
                ddl1stGuest.appendChild(option);
            }
        }
    }

    btn1stGuest = document.createElement('button');
    btn1stGuest.id = 'BTN_1stGuest';
    btn1stGuest.type = 'button';
    btn1stGuest.innerHTML = 'Select This Character!';
    myDiv.appendChild(btn1stGuest);
}

编辑：好吧，我确实很困惑。我认为定义一个函数只是意味着编写函数。这些函数真的必须像@Huzaifah Farooq 的小提琴一样相互嵌套吗？声明和定义有什么区别？我很迷茫！

Answer 1

您是否尝试过在没有按钮的情况下运行startGame？也许那时您可以找到问题出在按钮还是功能上。我自己没有太多经验，我认为您没有正确创建按钮。尝试document.createAttribute 方法，然后将该属性附加到您的元素。看看这个：http://www.w3schools.com/jsref/met_document_createattribute.asp