2016-12-15 187 views
0

我正在爲我的JavaScript學習開發一個小型迷你遊戲,但我遇到了事件處理程序的問題。 enter image description hereJavascript:事件處理程序無法正常工作

我有一個系統,當你點擊升級技能時打開一個子徑向,然後選擇一個技能按鈕(罷工,防禦,治療,debuff)。

enter image description here

然後用戶可以選擇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) 
+0

您是否嘗試過對第二次單擊事件進行調試?看起來節點沒有父節點......意味着你應該添加'console.log(x);'這樣你就可以看到問題了。 – abc123

+0

什麼是'dom.el()'? – Barmar

+0

該錯誤意味着'dom.el('Strike')'返回'null'。 – Barmar

回答

0

我覺得

switch (object){ 

需求是

switch (object.name){ 

,因爲你似乎可以用object作爲實際對象,和object.name作爲一個字符串。

是否有可能因爲這個原因,switch語句沒有正確更新skillList數組?