좋아요 기능을 만들어 보다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
👍<span id="number">0</span>
</p>
<button id="like">좋아요</button>
<button id="hate">싫어요</button>
<script>
const like = () => { // 좋아요를 눌렀을 때 작동되는 함수
let num = document.getElementById("number") // HTML의 number아이디를 가진 요소 가져오기
number = parseInt(num.innerText) // 가져온 요소의 텍스트를 정수화
console.log(num) // 제대로 가져왔는지 확인 코드
console.log(number)
number++ // 누를 때마다 +1
num.innerText = number // HTML의 요소의 텍스트만 수정하기
}
const hate = () => { // 싫어요를 눌렀을 때 작동되는 함수
let num = document.getElementById("number")
number = parseInt(num.innerText)
if (number >= 1) { // 좋아요 수가 1보다 크거나 같을 때만 작동하기
number--
num.innerText = number
}
}
let btn_like = document.getElementById("like") // HTML의 like 아이디를 가진 요소 가져오기
// btn_like.addEventListener("click", like) // 가져온 요소에 이벤트 추가하기
let btn_hate = document.getElementById("hate")
// btn_hate.addEventListener("click", hate)
// +문법 1. 익명함수 : 함수 재사용 하지 않을 때
btn_like.addEventListener("click", () => {
let num = document.getElementById("number") // HTML의 number아이디를 가진 요소 가져오기
number = parseInt(num.innerText) // 가져온 요소의 텍스트를 정수화
console.log(num) // 제대로 가져왔는지 확인 코드
console.log(number)
number++ // 누를 때마다 +1
num.innerText = number // HTML의 요소의 텍스트만 수정하기
})
// +문법2. query Selector
document.querySelector("#hate").addEventListener("click", hate)
document.querySelectorAll("button")[1].addEventListener("click", hate) // 유사배열
</script>
</body>
</html>
좋아요 +1, 싫어요 -1 (음수가 될 순 없음) 함수 만들기
<p>
👍<span id="number">0</span>
</p>
<button id="like">좋아요</button>
<button id="hate">싫어요</button>
<script>
const like = () => { // 좋아요를 눌렀을 때 작동되는 함수
let num = document.getElementById("number") // HTML의 number아이디를 가진 요소 가져오기
number = parseInt(num.innerText) // 가져온 요소의 텍스트를 정수화
console.log(num) // 제대로 가져왔는지 확인 코드
console.log(number)
number++ // 누를 때마다 +1
num.innerText = number // HTML의 요소의 텍스트만 수정하기
}
const hate = () => { // 싫어요를 눌렀을 때 작동되는 함수
let num = document.getElementById("number")
number = parseInt(num.innerText)
if (number >= 1) { // 좋아요 수가 1보다 크거나 같을 때만 작동하기
number--
num.innerText = number
}
}좋아요나 싫어요 버튼을 누를 때 바뀌어야 할 것은 HTML문서에 있는 p태그의 텍스트인 문자형으로 된 숫자이다.
일단 딱 봐도 쉬운 좋아요 함수부터 만들어보겠다.
좋아요 함수 만들기
HTML문서의 number아이디를 가진 요소를 가져와야하니까 document.getElementById("number")
num에 보관하고, 우리는 요소의 텍스트만 필요하니까 num.innerText를 사용해서 문자열인 숫자를 꺼낸다.
문자열이니까 연산을 못하므로 parseInt로 숫자형으로 변환해준다.
이 함수가 실행되면 좋아요의 숫자가 +1 되야하니까 number++
+1 했으니까 바뀐 number아이디를 가진 요소의 텍스트를 변경해주기 위해서 요소를 보관한 num에 innerText로 텍스트 접근하고 바뀐 number를 대입해주면 된다.
싫어요 함수 만들기
좋아요 함수를 만드는 과정에서 숫자형으로 변환하는 과정까지는 똑같다.우리는 0에서 싫어요를 눌렀을 때 음수로 가는 것을 방지해야한다. 그러니까 number가 줄어드는 과정이 number가 1보다 크거나 같을때만 작동하면 된다. if문의 조건이 number >= 1로하고 그 조건문 안의 실행로직에 number-- 하고 요소를 보관한 num에 innerText로 텍스트 접근하고 바뀐 number를 대입해주면 된다.
이벤트 리스너를 이용하여 클릭시 함수 실행
let btn_like = document.getElementById("like") // HTML의 like 아이디를 가진 요소 가져오기
btn_like.addEventListener("click", like) // 가져온 요소에 이벤트 추가하기
let btn_hate = document.getElementById("hate")
btn_hate.addEventListener("click", hate)좋아요 버튼을 만드는 요소를 id가 like인 것을 통해 요소를 가져온다.
그 요소에 클릭했을 때 like함수를 실행하는 이벤트를 추가하기위해 addEventListener("click", like)
싫어요 버튼도 마찬가지로 똑같은 방법으로 하면 된다.
'Front-End > 3. JavaScript 실전' 카테고리의 다른 글
| [JS] Ex12_DOM속성실습.html (0) | 2023.06.20 |
|---|---|
| [JS] Ex11_DOM속성.html (0) | 2023.06.20 |
| [JS] Ex09_이벤트.html (0) | 2023.06.19 |
| [JS] Ex08_DOM예제.html (0) | 2023.06.19 |
| [JS] Ex07_DOM.html (6 없음) (0) | 2023.06.19 |
