버튼 누르면 숫자 증감하게 만들기_JAVASCRIPT

유림·2022년 8월 14일
1

💡dding's TIL

목록 보기
4/41
post-thumbnail

프로젝트를 진행하면서 아주 간단한 코드인 것을 알지만 빨리빨리 코드가 작성되지 않아서 슬펐다ㅠ
그리고 아무래도 프로젝트를 하다보니 사진, 디자인 등 코드 외 부분에도 시간을 많이 할애해야해서
아쉬움이 있었다. 내가 아직 많이 부족하기에 더 공부할 시간이 부족해졌기 때문.....

일단 custom detail 파트에서 넣었던 기능 중 버튼을 누르면 숫자 증감했던 코드를 기록해보려고한다.

[html 코드]

[javascript 코드]

[+, - 아이콘을 누르면 숫자가 증감하게 만들기]

  1. plus 버튼, minus버튼을 js에서 선언해주기
  2. plus, minus에 따라 결과값이 바뀌어야하기 때문에 result또한 선언해주기
    (class로 선언해도 되지만 유일하기 때문에 id로 선언했음)
  3. plus, minus 각각 addEventListener 함수를 넣어줬음
  • 클릭했을 때, i값이 증가되도록 i++
  • result.textContent = i; -> result값이 text로 보여질 수 있도록
  1. 단, 이렇게만 작성하게 되면 minus를 눌렀을 때 -1, -2,까지 수량이 나오기 때문에
    if문을 작성하여 i가 0개보다 작을 경우 "₩" + 0(₩0)으로 표기되도록 조건을 넣어주었음

[증감에 따라 최종 결제금액이 변경되도록 만들기]

  1. totalcost가 출력되는 span을 js에서 선언해주기
  2. 위에 증감되도록 만들었던 addEventListener에서
    totlacostNum이라는 이름으로 최종 결제금액을 따로 선언해주기
  3. 선언한 totlacostNum값을 textContent로 출력해주기
    단,
  • 금액이기 때문에 100,000처럼 가운데 ','를 넣기위한 "toLocaleSting()"메소드를 사용하였음
  • 숫자 앞에 ₩를 붙이고 싶어서 문자열 형태로 "₩" 를 추가하였음

[구현된 페이지 - "수량 part"]

profile
ɪ ʜᴏᴘᴇ ᴛᴏ sᴏʟᴠᴇ ʀᴇᴀʟ ᴘʀᴏʙʟᴇᴍs👩🏻‍💻❤️

0개의 댓글