JavaScript中创建和调用事件

Question

JavaScript中创建和调用事件

4

我正在制作一个完全使用HTML和Javascript编写的“冒险游戏”，我希望通过Javascript来创建大部分元素，以创造出一个令人惊叹的动态游戏！然而，我在使用事件和事件监听器方面遇到了问题。这是一个推理游戏；玩家从列表中选择自己的角色后，可以邀请五位嘉宾参加聚会。其中一位嘉宾被杀害，留下三个嫌疑人需要你来解决这个谜团。

在选择完角色后，还有一个按钮显示为“选择此角色！”。当点击此按钮时，应该隐藏“创建玩家界面”，并显示一个新的界面。但当前代码却直接跳过了“开始游戏”函数。我做错了什么？您能给予任何帮助将不胜感激！

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()）函数相似，创建了一个接受第一个“客人”的界面，并移除了玩家创建的用户界面。

- Shortstuff81000

"StartGame"函数是什么？ - andrew

btnPlayer.addEventListener('click', welcomePlayer(), true); 应该改为 btnPlayer.addEventListener('click', welcomePlayer, true); 去掉括号。当你添加括号时，函数会立即被调用，而不是等待事件触发它。你还重复添加了事件，一次是通过事件监听器，另一次是通过 onclick（同样不应该有括号，因为这会立即调用函数）。选择一种方法并坚持使用它。 - scrappedcola

@scrappedcola 虽然我非常怀疑，但如果 welcomePlayer 返回一个闭包，那它仍然是有效的代码 :) - webketje

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dtanders · Accepted Answer

这两行代码都将 onclick 处理程序设置为调用 welcomePlayer 函数的结果（看到括号了吗？）。

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

您可能是想说：

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