onclick DOM
onclick을 이용해 DOM 내부 요소들에 이벤트들을 추가해보는 작업을 해보겠습니다.
DOM 조작과 ONCLICK 이벤트를 같이 조합해서
사용자가 특정 요소를 클릭했을 때 DOM 조작이 일어나도록
하는 것이 일반적입니다.
코드를 보면서 생각해봅시다.
<body>
<h2 id="number">0</h2>
<div>
<button id="increase">+1</button>
<button id="reset">0</button>
<button id="decrease">-1</button>
<hr/>
<button id="red">빨간색</button>
<button id="blue">파란색</button>
<button id="black">검은색</button>
</div>
</body>구현하고 싶은 body 태그입니다.
버튼이 6개가 있으며
+1,-1 버튼은 각각 h2태그된 수에 +1, -1
0 버튼은 얼럿을 띄우면서 0으로 초기화.
수의 red, blue, black은 색상 변화입니다.
//
지금과 가장 다른 점은
0이 띄워져있던 페이지에 버튼을 통해서
이벤트가 발생하도록 새로운 구조를 만들어야 한다는 것
입니다.
<script>
window.onload = function() {
var number = document.getElementById("number");// # nember 얻어와 저장하기
var increase = document.getElementById("increase");// # increase 얻어와 저장하기
var decrease = document.getElementById("decrease");// # decrease 얻어와 저장하기
먼저
getElenentById로 body 태그의 요소들을
스크립트 안으로 가져와 선언해주었습니다.
// div를 변수에 저장해볼까요.
var div1 = document.getElementsByTagName("div");
console.log(div1[0]);
div도 div1으로서 선언해줍니다.
increase.onclick = function() {
// # number 내부 숫자를 얻어와 10진수로 정수화 시킨다.
// innerText는 태그 여닫는 부분 사이의 문자열만 엉어올 때
// 사용하면 되고, 아래와 같이
// innerText에 직접 값을 대입해 갱신할 수도 있습니다.
console.log(number.innerText);
var currentNum = parseInt(number.innerText, 10);
number.innerText = currentNum + 1;
// 100 대신 숫자가 1씩 누를 때 마다 증가하게 해주세요.
}
reset.onclick = function () {
alert("0을 클릭하셨네요.");
number.innerText = 0 ;
}
decrease.onclick = function() {
// 버튼 누를 때마다 1씩 마이너스
var currentNum = parseInt(number.innerText, 10);
number.innerText = currentNum - 1;
}
parseInt(number.innerText, 10);을 통해
h2태그 내의 text인 0을 10진수의 수로 고쳐주어 저장하고 나면
currentNum이란 변수로 선언해서
onclick 트리거가 발동했을 때 변화할 식을 적어줍니다.
var red = document.getElementById("red");
var blue = document.getElementById("blue");
var black = document.getElementById("black");
red.onclick = function() {
number.style.color = "red";
}
blue.onclick = function() {
number.style.color = "blue";
}
black.onclick = function() {
number.style.color = "black";
}
}색상 버튼도 비슷한 로직이라고 생각하면 됩니다.
body 태그의 요소들을 id red, blue, black을 통해
호출하여 선언한 뒤.
onclick을 이용해 이벤트를 저장했습니다.
문제없이 실행되는 모습입니다.
일단은 여기까지 입니다.
배울 게 참 많네요.