JavaScript) 버튼 클릭 시 숫자 카운트 업!

Q. 각각의 버튼 클릭 시 카운트 업

 

html

<button id="button_a">ButtonA Up</button>
<button id="button_b">ButtonB Up</button>

<p>Button A - <span id="counter_a">0</span></p>
<p>Button B - <span id="counter_b">0</span></p>

 

script

window.onload = function(){
	var buttonA = document.getElementById('button_a');
	var buttonB = document.getElementById('button_b');
	var counterA = document.getElementById('counter_a');
	var counterB = document.getElementById('counter_b');
	
	buttonA.onclick = function(){
		counterA.innerHTML = Number(counterA.innerHTML)+1;
	}
	buttonB.onclick = function(){
		counterB.innerHTML = Number(counterB.innerHTML)+1;
	}
}

 

각각 누르는 버튼에 따라 숫자가 카운트 업 된다.

 

---

Q. 두 개의 카운트를 동시에 올리려면?

 

html

<button id="button_a">ButtonA Up</button>
<button id="button_b">ButtonB Up</button>
<button id="button_all">all</button>

<p>Button A - <span id="counter_a">0</span></p>
<p>Button B - <span id="counter_b">0</span></p>

 

script

window.onload = function(){
	var buttonA = document.getElementById('button_a');
	var buttonB = document.getElementById('button_b');
	var buttonAll = document.getElementById('button_all');
	var counterA = document.getElementById('counter_a');
	var counterB = document.getElementById('counter_b');
	
	buttonA.onclick = function(){
		counterA.innerHTML = Number(counterA.innerHTML)+1;
	}
	buttonB.onclick = function(){
		counterB.innerHTML = Number(counterB.innerHTML)+1;
	}
	buttonAll.onclick = function(){
		buttonA.onclick();
		buttonB.onclick();
	}
}

---

Q. 카운트를 내리려면?

html

<button id="button_a_d">ButtonA Down</button>
<button id="button_b_d">ButtonB Down</button>

 

script

window.onload = function(){
	var buttonAdown = document.getElementById('button_a_d');
	var buttonBdown = document.getElementById('button_b_d');
	buttonAdown.onclick = function(){
		counterA.innerHTML = Number(counterA.innerHTML)-1;
	}
	buttonBdown.onclick = function(){
		counterB.innerHTML = Number(counterB.innerHTML)-1;
	}
}

---