본문 바로가기
자바스크립트

수량을 늘리면 금액이 자동 계산.

by coie 2021. 2. 4.

전 글과 동일하게

게시물을 보는 화면을 만드는 중 

이렇게 쇼핑몰의 경우 고객이 해당 수량을 

선택하고 그에 따라 금액이 자동으로 갱신이 된다 라는 것을

생각해서 만들었다.

 

먼저 기본 html이다.

여기서 제일 어려웠다? 라고 하는부분은

hidden값이 였다.

기본 가격을 어디에 입력을 해야하는지 고민하는 중에

오늘도 구글선생님의 도움으로

저렇게 값을 하나주고 hidden으로 주면된다는 것을 보고

value부분만 ${}으로 해주면

자동으로 바뀐다는 것을 알아차렸다.

물론 그건 다음주에 하게 될 내용...

 

cell.js

먼저 formform의 경우 해당 form이 있을 경우 실행이 되도록 

기본 설정을 해두었다.

 

그 후

hidden으로 감춘 가격

amount는 보이는 수량

add,minus는 +,-

sum은 총합이다.

이렇게 기본적으로 설정을 해둔 뒤

add와 minus를 눌렀을 경우 

금액부분이 바뀌는 부분까지는 무난하게 했고

console에는 잘 찍혔다

그런데

 

막상 html에서는 금액부분이 보이지 않았다.....

 

그래서 고치고 고친 결과

sum.value=sell_price.value를 넣으면 되는 것이였다.

html에서 value값을 설정해도 되지만

그렇게 되면 후에 수정을 할 때

둘다 수정을 해야하기에

자바스크립트에서 html의 해당 부분의

value를 읽어와서 처음에 임시적으로 부여하면 되는 것.

rwd117.github.io/shop/%EC%82%AC%EC%9D%B4%ED%8A%B8/sub/view

 

Document

 

rwd117.github.io

 

이제 내일부터 주말까지

전부 연동을 한 뒤

데이터베이스를 만든 후 입력한 값이 저장되는것 과

읽어오는 것만 하면된다!