我正在爲我的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)
您是否嘗試過對第二次單擊事件進行調試?看起來節點沒有父節點......意味着你應該添加'console.log(x);'這樣你就可以看到問題了。 – abc123
什麼是'dom.el()'? – Barmar
該錯誤意味着'dom.el('Strike')'返回'null'。 – Barmar