[JavaScript onclick] 인스타그램 좋아요 클릭시 이벤트 발생시키기
[JavaScript onclick] 인스타그램 좋아요 클릭시 이벤트 발생시키기 — #javascriptonclick 학습목표 HTML속성중 onclick속성이 있다. 이 속성 안에 js로 함수를 만들어 좋아...
#Languages#Naver Blog
#javascriptonclick
학습목표
HTML속성중 onclick속성이 있다. 이 속성 안에 js로 함수를 만들어 좋아요 클릭시 발생하는 이벤트를 만들어 볼 것 이다.
우선 기본적인 HTML과 CSS로 기본적인 레이아웃을 모두 만들어준다.(위 파일참고 js빼고 구현해둠)
첨부파일
인스타그램 레이아웃
.zip
좌측에서 마우스가 "좋아요" 아이콘을 누르는 순간 색깔이 변하고 아래 글자에 좋아요 1개로 바뀌고 있다.
css onclick속성과 js 함수를 이용하여 만들어 보겠다.
onclick - 글자변환 구현
HTML
| <li><a href="javascript:void(0)" onclick="like();"id="like"><i class="fa-solid fa-heart"></i></a></li> <h3><a href="#" > 좋아요 <span id="count">0</span>개 </a> </h3> | 아이콘 클릭부분fontawesome으로 아이콘 선택 후 아이콘을 <a>태그로 감싸준다.onclick="like()"; = 클릭시 함수 호출을 미리 걸어둔다.아직 함수를 만들진 않았다. DOM접근을 위해 id값을 like로 주었다.좋아요 0개 글자변환 부분좋아요 0개에서 0을 span으로 감싼뒤 id값을 주었다.js로 접근하여 텍스트를 변환할 것이다. |
|---|
JS
| function like(id){ let countEl = document.querySelector("#count"); countEl.innerText = parseInt(countEl.innerText) +1 ;} | onclick이 발생하는 상황#count를 찾아주고 innerText로 글자변환 해주기클릭시 글자는 현재 innerText의 +1씩innerText는 문자이니 parseInt사용하여 정수로 변환 |
|---|
onclick - 아이콘 색 변환 구현
JS
| function like(id){ let likeIcon = document.querySelector("#like"); likeIcon.style.color = "red";} | onclick이 발생하는 상황#id를 찾아주고 .style.color = "red"; 주기 |
|---|
onclick - 모든 패널에 적용하기
하나의 패널에 구현이 되더라도 다른 패널을 추가하면 구현이 되질 않는다. 이때는 함수의 매게변수를 활용하여 구현할 수 있다.
HTML
| <li><a href="javascript:void(0)" onclick="like(1);"id="like1"><i class="fa-solid fa-heart"></i></a></li> <h3><a href="#" > 좋아요 <span id="count1">0</span>개 </a> </h3> | like와 count를 각 패널마다 다르게 id값주기 첫번째를 like1 count1 두번째를 like2 count2로 like() 안애 like(1), like(2)널어 구분하기 |
|---|
JS
| function like(id){ let countEl = document.querySelector("#count"+id); let likeIcon = document.querySelector("#like"+id); countEl.innerText = parseInt(countEl.innerText) +1 ; likeIcon.style.color = "red";} | id라는 매개변수를 만들고 id에 모두 추가하기첫 패너은 like(1)이니 JS로 넘어오면서 #count + id(=1)이 되어 #count1을 찾을 수 있게된다. |
|---|