如何使用Javascript添加和減去DOM中的數字？

Question

我想弄清楚如何使用Javascript對象跟蹤多個添加和刪除計數器，並使用對象中的數據更新DOM。

我的HTML：

<div id="first-counter-box"> 
    <div id="first-number">0</div> 
    <div id="first-add" onclick="add(first)"></div> 
    <div id="first-minus" onclick="minus(first)"></div> 
</div> 

<div id="second-counter-box"> 
    <div id="second-number">0</div> 
    <div id="second-add" onclick="add(second)"></div> 
    <div id="second-minus" onclick="minus(second)"></div> 
</div> 

我的javascript：

var dataObject = { 
    firstCounter = 0; 
    secondCounter = 0; 
} 

function add(counterId) { 
    if (counterId==first) { 
     dataObject.firstCounter++; 
     var firstNumber = document.getElementbyID("first-number"); 
     firstNumber.innerHTML(dataObject.firstCounter); 
    } 
    else (counterId==second) { 
     dataObject.secondCounter++; 
     var secondNumber = document.getElementbyID("second-number"); 
     secondNumber.innerHTML(dataObject.secondCounter); 
    } 

} 

function remove(counterId) { 
    if (counterId==first) { 
     dataObject.firstCounter--; 
     var firstNumber = document.getElementbyID("first-number"); 
     firstNumber.innerHTML(dataObject.firstCounter); 
    } 
    else (counterId==second) { 
     dataObject.secondCounter--; 
     var secondNumber = document.getElementbyID("second-number"); 
     secondNumber.innerHTML(dataObject.secondCounter); 
    } 
} 

我的目標是使用add（更新的dataObject內的數據），並刪除（）函數，並更新DOM與更新的信息。

我敢肯定有一個更好的方式去做這個比我的總的JavaScript做到這一點。謝謝！

Answer 1

大廈Kolink的評論，而是要提高生產效率，這裏是一些實實在在的幫助：

<div id="first-counter-box"> 
    <div id="first-number">0</div> 
    <div id="first-add" onclick="add('first')"></div> <-- first is a string --> 
    <div id="first-minus" onclick="minus('first')"></div> <-- first is a string --> 
</div> 

<div id="second-counter-box"> 
    <div id="second-number">0</div> 
    <div id="second-add" onclick="add('second')"></div> <-- second is a string --> 
    <div id="second-minus" onclick="minus('second')"></div> <-- second is a string --> 
</div> 

和JS：

var dataObject = { // correct object instantiation 
    firstCounter: 0, 
    secondCounter: 0 
} 

function add(counterId) { 
    if (counterId=='first') { // first is a string 
     dataObject.firstCounter++; 
     var firstNumber = document.getElementById("first-number"); // correct capitalization 
     firstNumber.innerHTML = dataObject.firstCounter; // property, not method 
    } 
    else (counterId=='second') { // second is a string 
     dataObject.secondCounter++; 
     var secondNumber = document.getElementById("second-number"); // correct capitalization 
     secondNumber.innerHTML = dataObject.secondCounter; // property, not method 
    } 

} 

function remove(counterId) { 
    if (counterId=='first') { // first is a string 
     dataObject.firstCounter--; 
     var firstNumber = document.getElementById("first-number"); // correct capitalization 
     firstNumber.innerHTML = dataObject.firstCounter; // property, not method 
    } 
    else (counterId=='second') { // second is a string 
     dataObject.secondCounter--; 
     var secondNumber = document.getElementById("second-number"); // correct capitalization 
     secondNumber.innerHTML = dataObject.secondCounter; // property, not method 
    } 
} 

---

這裏是一個重新寫爲更有效率：

var dataObject = { // keys match the counters 
    'first': 0, 
    'second': 0 
}; 

var divRefs = { 
    'first': document.getElementById("first-number"), 
    'second': document.getElementById("second-number") 
}; 

function add(counterId) { 
    dataObject[counterId]++; 
    divRefs[counterId].innerHTML = dataObject[counterId]; 
} 

function remove(counterId) { 
    dataObject[counterId]--; 
    divRefs[counterId].innerHTML = dataObject[counterId]; 
}