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

在JavaScript中单击事件时不会触发函数

1 个答案: