如何修復lootbox開罐器中的計數系統？

Question

我正在製作一個戰利品盒模擬器，並且遇到了一個問題。我希望它能夠計算Normals，Legendaries，Epics，Rares的數量，而且我認爲我已經擁有了它，但是它只會創建一個文本節點數量， 3「，但第二個去說他們得到另一個3正常，然後它會顯示」正常：36「，因爲它只是增加了分數，並使其成爲另一個文本節點。請幫助！

JS：

function displayBox(){ 
    //Add to list 
    for(i = 0; i < endresults.length; i++){ 
    var ul = document.getElementById("crate"); 
    var li = document.createElement("li"); 
    var span = document.createElement("span"); 
    var node = document.createElement("LI");  
    span.appendChild(document.createTextNode(endresults[i])); 
    li.setAttribute("id", "item" + i); 
    ul.appendChild(li); 
    li.appendChild(span); 

    //Check Quality and Strip 
    var str = $("#item" + i).text(); 
    console.log(str); 
    var e = document.getElementById("purple-stat") 
    var l = document.getElementById("orange-stat") 
    var r = document.getElementById("blue-stat") 
    var n = document.getElementById("white-stat") 

    var textnode = document.createTextNode(str); 
    node.appendChild(textnode) 
    if(endresults[i].indexOf("Normal") !=-1){ 
     $("#item" + i).addClass("normal animated bounceInDown"); 
     $("#item" + i).find('span').text(str.substring(7)); 
     node.id = "norm" 
     nscore = nscore + 1 
    } 
    if (endresults[i].indexOf("Rare") !=-1){ 
     $("#item" + i).addClass("rare animated bounceInDown"); 
     $("#item" + i).find('span').text(str.substring(5)); 
     node.id = "rr" 
     rscore = rscore + 1 
    } 
    if(endresults[i].indexOf("Epic") !=-1){ 
     $("#item" + i).addClass("epic animated bounceInDown"); 
     $("#item" + i).find('span').text(str.substring(5)); 
     node.id="epc" 
     escore = escore + 1 
    } 
    if(endresults[i].indexOf("Lgnd") !=-1){ 
     $("#item" + i).addClass("legendary animated bounceInDown"); 
     $("#item" + i).find('span').text(str.substring(5)); 
     node.id = "lgnd" 
     lscore = lscore + 1 
    } 
    document.getElementById("itemlog").appendChild(node); 
    //Check Hero 
    //Generic 
    if(endresults[i].indexOf("Spray") || endresults[i].indexOf("Coins") !=-1){ 
     $("#item" + i).addClass("generic"); 
    } 
    //orisa 
    if(endresults[i].indexOf("Orisa") !=-1){ 
     $("#item" + i).addClass("orisa"); 
    } 

    //sombra 
    if(endresults[i].indexOf("Sombra") !=-1){ 
     $("#item" + i).addClass("sombra"); 
    } 
    //ana 
    if(endresults[i].indexOf("Ana") !=-1){ 
     $("#item" + i).addClass("ana"); 
    } 
    //bastion 
    if(endresults[i].indexOf("Bastion") !=-1){ 
     $("#item" + i).addClass("bastion"); 
    } 
    //dva 
    if(endresults[i].indexOf("D.Va") !=-1){ 
     $("#item" + i).addClass("dva"); 
    } 
    //genji 
    if(endresults[i].indexOf("Genji") !=-1){ 
     $("#item" + i).addClass("genji"); 
    } 
    //hanzo 
    if(endresults[i].indexOf("Hanzo") !=-1){ 
     $("#item" + i).addClass("hanzo"); 
    } 
    //junkrat 
    if(endresults[i].indexOf("Junkrat") !=-1){ 
     $("#item" + i).addClass("junkrat"); 
    } 
    //lucio 
    if(endresults[i].indexOf("Lucio") !=-1){ 
     $("#item" + i).addClass("lucio"); 
    } 
    //McCree 
    if(endresults[i].indexOf("McCree") !=-1){ 
     $("#item" + i).addClass("mccree"); 
    } 
    //Reaper 
    if(endresults[i].indexOf("Reaper") !=-1){ 
     $("#item" + i).addClass("reaper"); 
    } 
    //Mei 
    if(endresults[i].indexOf("Mei") !=-1){ 
     $("#item" + i).addClass("mei"); 
    } 
    //Mercy 
    if(endresults[i].indexOf("Mercy") !=-1){ 
     $("#item" + i).addClass("mercy"); 
    } 
    //Pharah 
    if(endresults[i].indexOf("Pharah") !=-1){ 
     $("#item" + i).addClass("pharah"); 
    } 
    //Reinhardt 
    if(endresults[i].indexOf("Reinhardt") !=-1){ 
     $("#item" + i).addClass("reinhardt"); 
    } 
    //Roadhog 
    if(endresults[i].indexOf("Roadhog") !=-1){ 
     $("#item" + i).addClass("roadhog"); 
    } 
    //Solider76 
    if(endresults[i].indexOf("Soldier: 76") !=-1){ 
     $("#item" + i).addClass("soldier"); 
    } 
    //Symmetra 
    if(endresults[i].indexOf("Symmetra") !=-1){ 
     $("#item" + i).addClass("symmetra"); 
    } 
    //Torbjorn 
    if(endresults[i].indexOf("Torbjorn") !=-1){ 
     $("#item" + i).addClass("torbjorn"); 
    } 
    //Tracer 
    if(endresults[i].indexOf("Tracer") !=-1){ 
     $("#item" + i).addClass("tracer"); 
    } 
    //Widowmaker 
    if(endresults[i].indexOf("Widowmaker") !=-1){ 
     $("#item" + i).addClass("widowmaker"); 
    } 
    //Winston 
    if(endresults[i].indexOf("Winston") !=-1){ 
     $("#item" + i).addClass("winston"); 
    } 
    //Zarya 
    if(endresults[i].indexOf("Zarya") !=-1){ 
     $("#item" + i).addClass("zarya"); 
    } 
    //Zenyatta 
    if(endresults[i].indexOf("Zenyatta") !=-1){ 
     $("#item" + i).addClass("zenyatta"); 
    } 

    } 
    isRunning = false; 
    var nnode = document.createTextNode(nscore.toString()) 
    n.appendChild(nnode) 
    var lnode = document.createTextNode(lscore.toString()) 
    l.appendChild(lnode) 
    var rnode = document.createTextNode(rscore.toString()) 
    r.appendChild(rnode) 
    var enode = document.createTextNode(escore.toString()) 
    e.appendChild(enode) 
} 

Answer 1

當你正從他們來爲字符串，即使它看起來像一個號碼的任何UI元素的值。所以在你用這樣的數值進行任何數學計算之前，只需將其轉換爲數字即可。 例如：

var strNum = $('#myNumver').text(); 
var num = Number(strNum); 
$('#myNumver').text(num+3);