在Javascript中创建和调用事件 [英] Createing and calling events in Javascript

问题描述

我正在选择完全用HTML和Javascript编写的冒险游戏。我想完全用Javascript创建大部分元素来创建一个真棒动态游戏！我无法使用事件和事件侦听器。这是一个神秘的游戏;玩家从列表中选择角色后，可邀请5位嘉宾参加派对。其中一名客人遇难，让您解决三名嫌犯的谜团。

选择了您的播放器之后，还有另一个按钮选择此角色！ 。点击此按钮时，播放器创建用户界面应被隐藏，并且可以看到新的用户界面。使用现在的代码，StartGame函数完全被跳过。我究竟做错了什么？你可以给任何帮助将是严重真棒，非常感谢！

  btnPlayer = document.createElement（'button'）; 
 btnPlayer.id ='BTN_btnPlayer'; 
 btnPlayer.type ='button'; 
 btnPlayer.addEventListener（'click'，welcomePlayer（），true）; 
 btnPlayer.onclick = welcomePlayer（）; 
 btnPlayer.innerHTML ='选择此字符！'; 
 myDiv.appendChild（btnPlayer）; 
  

编辑
我修改了我的按钮事件属性这个：

  btnPlayer.addEventListener（'click'，welcomePlayer，true）; 
 //btnPlayer.onclick = welcomePlayer; 
  

其中一个被注释掉，因为它们都没有工作。我也试着清理我的缓存。这里是我的StartGame（）函数，排除了按钮代码。我将不包含用于在我的下拉列表中创建选项的charFirstNames []和charLastNames []。我把他们分开，以便讲一个更有趣的故事;他们最终会在我得到错误和基本知识后得到数据库记录。我不认为我在这里搞砸了什么，但是我有可能做到了吗？

 函数startGame（divName）{
 myDiv =文档.getElementById（ '故事'）; 
 
 lblPlayer = document.createElement（'label'）; 
 lblPlayer.id ='LBL_Player'; 
 lblPlayer.htmlFor ='DDL_PlayerChar'; 
 lblPlayer.innerHTML ='请选择一个字符。 ; 
 myDiv.appendChild（lblPlayer）; 
 
 ddlPlayer = document.createElement（'select'）; 
 ddlPlayer.id ='DDL_PlayerChar'; 
 myDiv.appendChild（ddlPlayer）; 
 
 defOpt = document.createElement（option）; 
 defOpt.value = 0; 
 defOpt.text ='选择...'; 
 ddlPlayer.appendChild（defOpt）; 
 
 //创建并追加选项
 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（）函数，创建了一个接口来邀请第一个guest，并删除了玩家创建UI。

>这两行都将 onclick 处理程序设置为调用 welcomePlayer 函数的结果（请参阅parens？）。

  btnPlayer.addEventListener（'click'，welcomePlayer（），true）; 
 btnPlayer.onclick = welcomePlayer（）; 
  

您可能的意思是

  btnPlayer.addEventListener（'click'，welcomePlayer，true）; 
  

I'm working on a choose your own adventure game written entirely in HTML and Javascript; I want to create most of my elements entirely in Javascript to create an awesome dynamic game! I am having trouble using events and event listeners. It's a mystery game; after the player chooses their character from a list, they can invite five guests to a party. One of the guests is killed, leaving you to solve the mystery with three suspects.

After you've selected your player, there's another button that says "Select this character!". When this button is clicked, the player creation UI is supposed to be hidden, and a new UI is visible. With the code as it is now, the "StartGame" function is skipped entirely. What am I doing wrong? Any help you can give would be seriously awesome and greatly appreciated!

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

EDIT I modified my button event properties to look like this:

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

One is commented out because neither has worked. I tried clearing my cache, too. Here is my StartGame() function with the button code excluded. I won't include the "charFirstNames[]" and "charLastNames[]" used to create the choices in my dropdownlist. I have them separated in order to tell a more interesting story; they will eventually be database records when I get the bugs and the basics worked out. I don't think I messed up anything up here, but is it possible that I did? The function is called by the only button coded into the 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;

}

The welcomePlayer() function is similar to the startgame() function, creating the interface to invite the first "guest" and removing the player creation UI.

解决方案

Both of these lines set the onclick handler to the result of calling the welcomePlayer function (see the parens?).

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

You probably mean

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

这篇关于在Javascript中创建和调用事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！