Part 3. 전체선택 기능 만들기
버튼 클릭 이벤트 핸들링 하기
- HTML 문서에 input 태그를 사용하여 버튼을 만들어준다.
<body> <input type="button" value="Select All" onclick=selectAll();> <br> </body>
전체 이미지 div tag 얻어오기
- selectAll() 함수를 통해서 모든 div 태그를 선택해준다.
- 변수 images안에 image 클래스를 가진 모든 엘리먼트를 배열로 저장해준다.
- 반복문을 활용하여 classList.add를 통해서 images모든 인덱스에 image-selected 클래스를 추가해준다.
<script> function selectAll() { var images = document.getElementsByClassName("image"); for (var i = 0 ; i < images.length ; i++) { images[i].classList.add("image-selected"); } } </script>
배열에서 각각의 이미지에 대해 class 조정
- if문으로 btn의 value가 Unselected All이면 image-selected 클래스 제거, selected All인 경우 image-selected 클래스를 추가해준다.
- 버튼을 클릭하여 btn의 Value 값을 selected 에서 Unselected All로
반대로 btn의 Value 값이 Unselected All면 selected로 바꿔주도록 한다.<script> nction selectAll(btn) { var images = document.getElementsByClassName("image"); for (var i = 0 ; i < images.length ; i++) { if(btn.value == "Unselected All") { images[i].classList.remove("image-selected"); } else{ images[i].classList.add("image-selected"); } } if(btn.value == "Unselected All") { btn.value = "selected All"; } else{ btn.value = "Unselected All"; } } </script>
추가적으로 다룬 내용
- tag의 속성으로 실행되던 event handler에서 this를 호출한 함수의
인자로 전달해 이벤트가 발생한 element에 쉽게 접근할 수 있다.<body> <input type="button" value="Select All" onclick=selectAll(this);> // 이 안에서는 this는 input이다. // input 태그에서 selectAll이라는 함수를 호출하였기 때문에 // selectAll 함수 안에서는 this가 window가 된다. // 따라서 selectAll 함수 안에서 input 태그를 사용하고 싶다면 인자로 this를 넣어줘야한다. </body> <script> function selectAll(btn) { //그러면 js파일에서 this인자를 btn으로 받을 수 있다. btn.value = "Unselecte All" } </script>
자기 신뢰의 힘을 믿고 실천하는 개발자가 되고자합니다.