[JS] div에 Onclick 적용하기
2022. 5. 31. 22:12ㆍ카테고리 없음
<JavaScript 클릭 이벤트 >
onclick: 브라우저에게 해야할 일을 알리는 바인딩 이벤트를 발생하기 위해서 onclick함수를 사용함.
<사용법>
| <Javascript 코드 > name.onclick = 'javascriptCode' <HTML 코드 > element onclick = "javascriptCode" |
미션: 세개의 회색 상자가 있고 박스를 누르면 눌린 상자의 색이 바뀌게 하자!
1. html 로 세개의 회색 상자 구성
<head>에 <style>을 추가하여 레이아웃을 설정한다.
div1: 첫 웹페이지 박스 레이아웃
div2: 클릭했을때 박스 레이아웃
div3: 클릭한 박스 외에 박스들 레이아웃
<style>
.div1{
display: inline-block;
width: 100px;
height: 50px;
color: white;
border-color: black;
border-style: solid;
background-color: gray;
text-align: center;
line-height: 50px;
}
.div2{
display: inline-block;
width: 100px;
height: 50px;
color: black;
background-color: white;
text-align: center;
line-height: 50px;
}
.div3{
display: inline-block;
width: 100px;
height: 50px;
color: white;
background-color: gray;
text-align: center;
line-height: 50px;
}
</style>
2. html에 선택상자 구성하기
<body>에 html, css, java라는 3개의 선택상자 구성한다.
<div class="div1" onclick="changeClass1()">
<div id="target1">html</div>
</div>
<div class="div1" onclick="changeClass2()">
<div id="target2">css</div>
</div>
<div class="div1" onclick="changeClass3()">
<div id="target3">java</div>
</div>해당 텍스트는 div1 클래스에 쌓여 있고, 클릭하였을때 각각의 펑션으로 이동하게 된다.
3. onclick 펑션 구성하기
<script>를 열어 클래스를 변경하여 스타일을 변경시킨다.
function changeClass1() {
let $target1 = document.getElementById('target1');
let $target2 = document.getElementById('target2');
let $target3 = document.getElementById('target3');
$target1.className = 'div2'
$target2.className = 'div3'
$target3.className = 'div3'
}
function changeClass2() {
let $target1 = document.getElementById('target1');
let $target2 = document.getElementById('target2');
let $target3 = document.getElementById('target3');
$target1.className = 'div3'
$target2.className = 'div2'
$target3.className = 'div3'
}
function changeClass3() {
let $target1 = document.getElementById('target1');
let $target2 = document.getElementById('target2');
let $target3 = document.getElementById('target3');
$target1.className = 'div3'
$target2.className = 'div3'
$target3.className = 'div2'
}
<결과창>
0123
D.O.N.E!!!
