Function is not being triggered on event click in JavaScript

Question

This is a followup to my previous question "Creating and Calling Events in Javascript" . I have created a button using pure JS and assigned an event ( welcomePlayer ) and an event handler to it. Unfortunately, nothing happens when I click on btnPlayer . Is there something in the startGame function that's messing with the button's behavior, or am I missing something simple?

<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);
}

EDIT: OK, I am definitely confused. I thought defining a function just meant writing the function. Do the functions really have to be nested inside each other like they are in @Huzaifah Farooq's fiddle? What is the difference between declaring and defining? I am so lost!

Answer 1

Have you tried to run startGame without the button? Maybe then you could find if the issue was with the button or the function. Not being too experienced myself, I think that you haven't created your button correctly. Try the document.createAttribute method and then append that attribute to your element. Take a look at this: http://www.w3schools.com/jsref/met_document_createattribute.asp