Javascript:事件处理程序无法正常工作
问题描述:
我正在为我的JavaScript学习开发一个小型迷你游戏,但我遇到了事件处理程序的问题。 Javascript:事件处理程序无法正常工作
我有一个系统,当你点击升级技能时打开一个子径向,然后选择一个技能按钮(罢工,防御,治疗,debuff)。
然后用户可以选择1 3技能的选项,以取代其现有的技能,并将其升级到新的更好的。它也有一个层次系统。你从基本技能开始(第1层),并且可以将每项技能一直升级到第3层。在上图中,技能列表适用于第3层技能。正如你所看到的,2级技能已经被设定(Poision Strike)并且取代了“Strike”。
我遇到的问题是我的代码。当你选择一项技能时,例如:位置1(Poision Strike),技能将升级。但是,如果您在尝试访问第3层时再次在位置2或3上单击升级,则会出现错误。
javascript.js:628 Uncaught TypeError: Cannot read property 'parentNode' of null
at removeSkillButton (javascript.js:628)
at HTMLDivElement.<anonymous> (javascript.js:543)
at HTMLDivElement.e (jquery-3.1.0.min.js:3)
at HTMLDivElement.dispatch (jquery-3.1.0.min.js:3)
at HTMLDivElement.q.handle (jquery-3.1.0.min.js:3)
我必须双击位置2或3才能取代烦人的技能。大多数玩家希望在升级屏幕上单击技能1次时,它会立即执行此操作。我不希望我的用户在每次升级技能时双击。以下是代码。
主要区域或问题
$('#upgradeSkillsBar').one('click', '#position1', function(){
removeSkillButton(object);
addSkillButton(skillList[0]);
removeRadialSubMenu();
});
$('#upgradeSkillsBar').one('click', '#position2', function(){
removeSkillButton(object);
addSkillButton(skillList[1]);
removeRadialSubMenu();
});
$('#upgradeSkillsBar').one('click', '#position3', function(){
removeSkillButton(object);
addSkillButton(skillList[2]);
removeRadialSubMenu();
});
整函数
function radialSelector(object){
var skillList;
switch (object){
case strike:
skillList = [poisonstrike, bluntstrike, quickstrike];
break;
case poisonstrike:
skillList = [venom, immunity, toxic];
break;
case bluntstrike:
skillList = [eviscerate, bruteforce, revenge];
break;
case quickstrike:
skillList = [nimblelance, whirlwind, backstab];
break;
case defend:
skillList = [holdtheline, quickrecovery, repairarmor];
break;
case holdtheline:
skillList = [stronghold, titan, heavyarmor];
break;
case quickrecovery:
skillList = [impenetrable, untouchable, fortifiedarmor];
break;
case repairarmor:
skillList = [stonewall, stout, unbreakablearmor];
break;
case cure:
skillList = [cura, blessing, healingwind];
break;
case debuff:
skillList = [lowerstrength, lowerarmor, loweragility];
break;
default:
console.log("radialSelector() has set its switch statement to default")
}
for (var i=0, l=skillList.length; i<l; i++) {
radialSubMenuSkills("position"+(i+1), skillList[i]);
}
$('#upgradeSkillsBar').one('click', '#position1', function(){
removeSkillButton(object);
addSkillButton(skillList[0]);
removeRadialSubMenu();
});
$('#upgradeSkillsBar').one('click', '#position2', function(){
removeSkillButton(object);
addSkillButton(skillList[1]);
removeRadialSubMenu();
});
$('#upgradeSkillsBar').one('click', '#position3', function(){
removeSkillButton(object);
addSkillButton(skillList[2]);
removeRadialSubMenu();
});
}
线628
function removeSkillButton(object) {
var x = dom.el(object.name);
console.log(object);
x.parentNode.removeChild(x);
}
控制台登录一次升级点击位置1:
javascript.js:627 Object {name: "Strike", tier: 1, category: "Attack", description: "Basic Attack", imageURL: undefined}
在第二次升级点击位置2或
控制台登录:
javascript.js:627 Object {name: "Strike", tier: 1, category: "Attack", description: "Basic Attack", imageURL: undefined}
javascript.js:628 Uncaught TypeError: Cannot read property 'parentNode' of null
at removeSkillButton (javascript.js:628)
at HTMLDivElement.<anonymous> (javascript.js:543)
at HTMLDivElement.e (jquery-3.1.0.min.js:3)
at HTMLDivElement.dispatch (jquery-3.1.0.min.js:3)
at HTMLDivElement.q.handle (jquery-3.1.0.min.js:3)
答
我觉得
switch (object){
需求是
switch (object.name){
,因为你似乎可以用object
作为实际对象,和object.name
作为一个字符串。
是否有可能因为这个原因,switch语句没有正确更新skillList
数组?
您是否尝试过对第二次单击事件进行调试?看起来节点没有父节点......意味着你应该添加'console.log(x);'这样你就可以看到问题了。 – abc123
什么是'dom.el()'? – Barmar
该错误意味着'dom.el('Strike')'返回'null'。 – Barmar