자바스크립트 총 결제 금액 합산했더니 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) 이런식으로
같은 상품끼리의 더한 값도 출력하려면
그밑에 같이 넣으면 될까요??
그것이 궁극적으로 어떤 의도인지는 제가 알수 없기 때문에
시도해 보시고 기대하는 결과가 나온다면
그게 곧 답이 아닐까 싶습니다.
넵 감사합니다
계속 NaN이 나오는데 쭉 해보겠습니다!
(parseint(localAmount.value) + parseint(productAmount.value))
위와 같이 문자을 숫자로 변경해서 해 보세요
productAmount.value
이 값이 어디서 왔는지에 대한 내용이 없습니다.
제가 올린 캡처의 localAmount 저ㅂ부분의 값을 가져올때 localAmount.value를 주어야하는것이
아닌가요?
너무 초보적인 질문 죄송합니다...
혹시 콘솔로그로 확인해보셨나요?
숫자형으로 나오는지 확인해보시고 아니면 parsint 나 number 함수로 감싸주세요.
콘솔로그 찍어봐도 NaN으로 나옵니다...
parsInt랑 number함수도 동일하구요
혹시 몰라 캡처했는데
Amount 두 변수가 input이 아니어서 그런걸까요?
상품 체크박스 체크할때마다 금액이 추가되는 시스템입니다
그리고 두 상품의 합계가 최종적으로 resultSum에 출력되어야 하는거구요
어느정도 알거같다가도 어렵습니다..ㅠ
해당 페이지 URL을 올려 보세요.
<input인지
<span 인지에 따라
.value
아니면
.innerText를 써야합니다.