자바스크립트 총 결제 금액 합산했더니 NaN이 나옵니다..

자바스크립트 총 결제 금액 합산했더니 NaN이 나옵니다..

QA

자바스크립트 총 결제 금액 합산했더니 NaN이 나옵니다..

본문

const resultSum = document.getElementById("result_sum");---- 총 결제금액

 

for (let i = 0; i < productChcbx.length; i++) {

    productChcbx[i].addEventListener("click", () => {

        let cnt = 0;

        for (let j = 0; j < productChcbx.length; j++) {

            if (productChcbx[j].checked) {

                cnt++;

                resultSum.value = parseInt(productAmount.value)

                if (cnt == 1) {

                    addProduct.style.display = "flex";

                    productAmount.innerHTML = "70,000원";

                } else if (cnt > 1) {

                    sum = 70000 + 60000 * (cnt - 1);

                    productAmount.innerHTML = number_format(sum) + "원";

                }

            } else if (!productChcbx[j].checked) {

                if (cnt == 0) {

                    addProduct.style.display = "none";

                }

            }

        }

    })

}

for (let k = 0; k < localCheckboxs.length; k++) {

    localCheckboxs[k].addEventListener("click", () => {

        let cnt = 0;

        for (let h = 0; h < localCheckboxs.length; h++) {

            if (localCheckboxs[h].checked) {

                cnt++;

                resultSum.value = parseInt(localAmount.value)

                if (cnt == 1) {

                    addLocal.style.display = "flex";

                    localAmount.innerHTML = "150,000원";

                } else if (cnt > 1) {

                    sum = 150000 + 100000 * (cnt - 1);

                    localAmount.innerHTML = number_format(sum) + "원";

                }

            } else if (!localCheckboxs[h].checked) {

                if (cnt == 0) {

                    addLocal.style.display = "none";

                }

            }

        }

    })

}

 

 

 

 

resultSum.value = localAmount + productAmount 이거와

resultSum.value = localAmount.value + productAmount.value

이렇게 했을때 NaN가 나옵니다..

상품은 2개이구요

 

각 for문 안에 resultSum.value += 70000; 이런식으로 넣으면 70000+150000 = 220000만원이 아닌

70000150000 이렇게 나오구요.....

변수로 70000, 150000 이런식으로 해놓으면 더 수월할거 같은데

처음 1개 구매시 70000, 150000이고 2개부터는 60000, 100000만원씩 추가되는거라 쉽지가 않네요

부디 저에게 팁을 주시면 아주아주 감사하겠습니다

오늘 설 연휴시작인데 새해 복 많이 받으세요!

이 질문에 댓글 쓰기 :

답변 4

소스코드의 일부는 참조하는 부분을 찾을수 없습니다.

 

여기에 참조하는 부분을 유추해 재구성된 코드가 있으니 참고에 도움이 되기를 바랍니다.

 


<style>
#addProduct, #addLocal { background-color: olive; width: 20em; }
</style>
 
<ul>
    <li>
        <p>productChcbx : </p>
        <p><label><input type="checkbox" name="productChcbx" /> 1</label></p>
        <p><label><input type="checkbox" name="productChcbx" /> 2</label></p>
        <p><label><input type="checkbox" name="productChcbx" /> 3</label></p>
        <p><label><input type="checkbox" name="productChcbx" /> 4</label></p>
        <p><label><input type="checkbox" name="productChcbx" /> 5</label></p>
    </li>
    <li>
        <p>localCheckboxs : </p>
        <p><label><input type="checkbox" name="localCheckboxs" /> 1</label></p>
        <p><label><input type="checkbox" name="localCheckboxs" /> 2</label></p>
        <p><label><input type="checkbox" name="localCheckboxs" /> 3</label></p>
        <p><label><input type="checkbox" name="localCheckboxs" /> 4</label></p>
        <p><label><input type="checkbox" name="localCheckboxs" /> 5</label></p>
    </li>
    <li>
        addProduct : <div id="addProduct">addProduct display: flex</div>
    </li>
    <li>
        productAmount : <button type="button" value="0" id="productAmount" name="productAmount">productAmount</button>
    </li>
    <li>
        addLocal : <div id="addLocal">addLocal display: flex</div>
    </li>
    <li>
        localAmount : <button type="button" value="0" id="localAmount" name="localAmount">localAmount</button>
    </li>
    <li>
        result_sum : <input type="text" id="result_sum" name="result_sum" placeholder="총 결제금액" />
    </li>
</ul>
 
<script>
const resultSum = document.getElementById("result_sum");//---- 총 결제금액
 
const addProduct = document.getElementById("addProduct");
const productAmount = document.getElementById("productAmount");
const addLocal = document.getElementById("addLocal");
const localAmount = document.getElementById("localAmount");
 
const productChcbx = document.getElementsByName("productChcbx");
const localCheckboxs = document.getElementsByName("localCheckboxs");
 
for (let i = 0; i < productChcbx.length; i++) {
    productChcbx[i].addEventListener("click", () => {
        let sum = 0;
        let cnt = 0;
 
        for (let j = 0; j < productChcbx.length; j++) {
            if (productChcbx[j].checked == true) {
                cnt++;
            }
        }
        
        if (cnt == 0) {
            addProduct.style.display = "none";
            productAmount.value = 0;
        } else if (cnt == 1) {
            addProduct.style.display = "flex";
            productAmount.innerHTML = "70,000원";
            productAmount.value = 70000;
        } else if (cnt > 1) {
            sum = 70000 + 60000 * (cnt - 1);
            productAmount.innerHTML = number_format(String(sum)) + "원";
            productAmount.value = sum;
        }
 
        resultSum.value = parseInt(productAmount.value) + parseInt(localAmount.value);
    });
}

for (let k = 0; k < localCheckboxs.length; k++) {
    localCheckboxs[k].addEventListener("click", () => {
        let sum = 0;
        let cnt = 0;
 
        for (let h = 0; h < localCheckboxs.length; h++) {
            if (localCheckboxs[h].checked == true) {
                cnt++;
            }
        }
        
        if (cnt == 0) {
            addLocal.style.display = "none";
            localAmount.value = 0;
        } else if (cnt == 1) {
            addLocal.style.display = "flex";
            localAmount.innerHTML = "150,000원";
            localAmount.value = 150000;
        } else if (cnt > 1) {
            sum = 150000 + 100000 * (cnt - 1);
            localAmount.innerHTML = number_format(String(sum)) + "원";
            localAmount.value = sum;
        }
 
        resultSum.value = parseInt(productAmount.value) + parseInt(localAmount.value);
    });
}
 
// from https://sir.kr/js/common.js
function number_format(data)
{
    var tmp = '';
    var number = '';
    var cutlen = 3;
    var comma = ',';
    var i;
    var sign = data.match(/^[\+\-]/);
    if(sign) {
        data = data.replace(/^[\+\-]/, "");
    }
    len = data.length;
    mod = (len % cutlen);
    k = cutlen - mod;
    for (i=0; i<data.length; i++)
    {
        number = number + data.charAt(i);
        if (i < data.length - 1)
        {
            k++;
            if ((k % cutlen) == 0)
            {
                number = number + comma;
                k = 0;
            }
        }
    }
    if(sign != null)
        number = sign+number;
    return number;
}
</script>

배르만님! 해결했습니다 감사합니다
각 조건문에 값이 없을때는 value=0, 더할때는 sum을 각각 넣어주어야 parseInt가 나오는군요..
그럼 한가지만 더 여쭤보고 싶은데

지금 resultSum.value = parseInt(productAmount.value) + parseInt(localAmount.value);
이렇게 되어 있으면 parseInt(productAmount.value) + parseInt(productAmount.value) 이런식으로
같은 상품끼리의 더한 값도 출력하려면
그밑에 같이 넣으면 될까요??


(parseint(localAmount.value) + parseint(productAmount.value))

위와 같이 문자을 숫자로 변경해서 해 보세요

콘솔로그 찍어봐도 NaN으로 나옵니다...

parsInt랑 number함수도 동일하구요

혹시 몰라 캡처했는데thumb-1890276034_1674313379.883_730x120.png

 

Amount 두 변수가 input이 아니어서 그런걸까요?

상품 체크박스 체크할때마다 금액이 추가되는 시스템입니다

그리고 두 상품의 합계가 최종적으로 resultSum에 출력되어야 하는거구요

어느정도 알거같다가도 어렵습니다..ㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT