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> 

내 자바 스크립트 :

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); 
    } 
} 

내 목표는 추가 (로 데이터 객체 내의 데이터를 업데이트) 및() 함수를 제거하고, DOM을 업데이트하는 것입니다 업데이트 된 정보.

내 총체적인 자바 스크립트보다 더 좋은 방법이 있다고 확신합니다. 고맙습니다!

Answer 1

건물 Kolink의 의견에,하지만 더 생산성, 여기에 몇 가지 실제 도움이됩니다 :

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 
    } 
} 

여기

---

이 될 수있는 다시 쓰기입니다 :

<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 = { // 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]; 
}