在 Javascript 中创建和调用事件

Question

我正在开发一款完全用 HTML 和 Javascript 编写的自选冒险游戏；我想完全用 Javascript 创建我的大部分元素，以创建一个很棒的动态游戏！我在使用事件和事件侦听器时遇到问题。这是一个神秘的游戏；玩家从列表中选择角色后，可以邀请五位客人参加派对。一位客人被杀，留下你和三名嫌疑人解开谜团。

选择播放器后，会出现另一个按钮，上面写着“选择此角色！”。单击此按钮时，播放器创建 UI 应该是隐藏的，而新的 UI 是可见的。使用现在的代码，“StartGame”函数被完全跳过。我究竟做错了什么？您可以提供的任何帮助都将非常棒，非常感谢！

btnPlayer = document.createElement('button');
btnPlayer.id = 'BTN_btnPlayer';
btnPlayer.type = 'button';
btnPlayer.addEventListener('click', welcomePlayer(), true);
btnPlayer.onclick = welcomePlayer();
btnPlayer.innerHTML = 'Select This Character!';
myDiv.appendChild(btnPlayer);

编辑 我将按钮事件属性修改为如下所示：

btnPlayer.addEventListener('click', welcomePlayer, true);
//btnPlayer.onclick = welcomePlayer;

一个被注释掉，因为两者都没有工作。我也尝试清除缓存。这是我的 StartGame() 函数，其中排除了按钮代码。我不会在我的下拉列表中包含用于创建选项的“charFirstNames[]”和“charLastNames[]”。我把它们分开是为了讲一个更有趣的故事；当我发现错误并解决了基础问题时，它们最终将成为数据库记录。我不认为我在这里搞砸了任何事情，但我有可能这样做吗？该函数由编码到 HTML 中的唯一按钮调用。

function startGame(divName) {
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);
}

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

}

welcomePlayer()函数与startgame()函数类似，创建邀请第一个“客人”的界面，去掉玩家创建UI。

Answer 1

这两行都将onclick 处理程序设置为调用welcomePlayer 函数的结果（见括号？）。

btnPlayer.addEventListener('click', welcomePlayer(), true);
btnPlayer.onclick = welcomePlayer();

你可能是说

btnPlayer.addEventListener('click', welcomePlayer, true);