[TypeError] order.js:113 Uncaught (in promise) TypeError

[에러 발생 : TypeError]

order.js:113 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'value')
    at payment (order.js:113:27)
    at HTMLInputElement.<anonymous> (order.js:12:9)
payment @ order.js:113
(익명) @ order.js:12

 

[에러 원인]

order.js의 'payment()' 내 파라미터 값의 데이터로 불러올 value 값을 불러오지 못함

 

당장 order.js 로 가자

 

[문제 해결 과정]

1. order.js

function payment(){
    var IMP = window.IMP; 
    IMP.init("imp******"); //포트원 API 계정 번호

    const title = document.getElementById("title");
    const lastPrice = document.getElementById("lastPrice");
    const companyName = document.getElementById("companyName")
    const id = document.getElementById("id");
    const name = document.getElementById("name");
    const phone = document.getElementById("phone");
    const odNo = "jscd" + dateChange();

    IMP.request_pay({
        pg: 'kcp',
        pay_method: 'card',
        merchant_uid: odNo,
        name: title.value,
        amount: lastPrice.value, //***에러 발생한 부분과 관련 있는 코드
        company: companyName.value, // 가져온 회사 이름을 사용
        buyer_email: id.value,
        buyer_name: name.value,
        buyer_tel: phone.value,
    }, function (rsp){
            if(rsp.success){
                const rspData = {
                    odNo : odNo,
                    creditNum : rsp.card_number, //결제카드 번호
                    cardType : rsp.card_name, //결제카드 종류
                    payType : rsp.pay_method, //결제방법
                    status : rsp.status, //결제상태
                    instlFees : rsp.card_quota, //할부개월
                    payDate : getDate(), //카드 승인일
                    payTime : toConvertUnixTimestamp(rsp.paid_at) //카드 승인시각
                };

                requestPay(rspData);
            }else{
                console.log("실패");
            }
        });
}

 

amount에서 lastPrice의 value 값을 불러오지 못하는 상황이다.

 

lastPrice.value 값은 

order.jsp에서 input 태그 내 value 값에서 불러오는 방식인데,

여기에서 무슨 문제가 생겼나보다.

 

2. order.jsp

<%--  수정 전--%>
<input type="text" id="lstPrice" name="lstPrice" value="${orderDto.lastPrice}">

 

정확히 보면 id를 lastPrice로 바꿨어야 했는데

실수로 lstPrice 그대로 되어 있는 것을 확인할 수 있다.

 

local DB에서의 컬럼명이 lstPrice였는데,

공용 DB로 연결하고 컬럼명이 바뀌는 과정에서 lastPrice로 바꾼 상태였다.

그러나 해당 부분을 인지하고 코드를 고치는 과정에서 저 부분을 고치지 않았나보다.

 

<%--  수정 후--%>
<input type="text" id="lastPrice" name="lastPrice" value="${orderDto.lastPrice}">

 

[문제 해결 완료]

 

잘 됐쥬 ?