readOnly 속성 , 총합 숫자로 구하는 Number

input을 사용하다보면 해당 에러를 자주 마주하게 된다

나같은 경우에 사용된 포인트와 사용한 쿠폰의 총 할인액을 구해서

해당 input창에 defaultValue로 넣어줬는데

총 할인액이 출력되지 않아서 value로 바꾸니 출력은 가능해졌다

하지만 해당 에러가 계속 발생해서 에러를 없앨 방법을 검색하게 되었는데

readOnly라고 속성을 추가해주면 깔끔하게 해결되었다

value를 사용할 경우에 값이 변화하고

defaultValue를 사용하면 값이 변화하지 않는다

앞으로 해당 에러가 나오면 readOnly를 적어주자

*<input> 태그의 readonly 속성은 <input> 요소의 입력 필드가 읽기 전용임을 명시*

할인액과 쿠폰액을 더해서 출력을 했는데

포인트 할인액이 2,000원
쿠폰 할인액이 5,000원이라고 하면

총 7,000원 할인인데

const totalDiscount=(useCoupon+sale);

이렇게 작성하고 totalDiscount를 출력했더니

20005000 이런식으로 값이 출력되는 경우가 있다

이럴 경우에는

const totalDiscount=(Number(useCoupon)+Number(sale));

이렇게 작성해주면

7,000원이라고 정상적으로 나오게된다!

유레카!