프로젝트를 진행하면서 아주 간단한 코드인 것을 알지만 빨리빨리 코드가 작성되지 않아서 슬펐다ㅠ
그리고 아무래도 프로젝트를 하다보니 사진, 디자인 등 코드 외 부분에도 시간을 많이 할애해야해서
아쉬움이 있었다. 내가 아직 많이 부족하기에 더 공부할 시간이 부족해졌기 때문.....
일단 custom detail 파트에서 넣었던 기능 중 버튼을 누르면 숫자 증감했던 코드를 기록해보려고한다.
[html 코드]
[javascript 코드]
[+, - 아이콘을 누르면 숫자가 증감하게 만들기]
- plus 버튼, minus버튼을 js에서 선언해주기
- plus, minus에 따라 결과값이 바뀌어야하기 때문에 result또한 선언해주기
(class로 선언해도 되지만 유일하기 때문에 id로 선언했음)
- plus, minus 각각 addEventListener 함수를 넣어줬음
- 클릭했을 때, i값이 증가되도록 i++
- result.textContent = i; -> result값이 text로 보여질 수 있도록
- 단, 이렇게만 작성하게 되면 minus를 눌렀을 때 -1, -2,까지 수량이 나오기 때문에
if문을 작성하여 i가 0개보다 작을 경우 "₩" + 0(₩0)으로 표기되도록 조건을 넣어주었음
[증감에 따라 최종 결제금액이 변경되도록 만들기]
- totalcost가 출력되는 span을 js에서 선언해주기
- 위에 증감되도록 만들었던 addEventListener에서
totlacostNum이라는 이름으로 최종 결제금액을 따로 선언해주기
- 선언한 totlacostNum값을 textContent로 출력해주기
단,
- 금액이기 때문에 100,000처럼 가운데 ','를 넣기위한 "toLocaleSting()"메소드를 사용하였음
- 숫자 앞에 ₩를 붙이고 싶어서 문자열 형태로 "₩" 를 추가하였음
[구현된 페이지 - "수량 part"]