자바스크립트 총 결제 금액 합산했더니 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개
소스코드의 일부는 참조하는 부분을 찾을수 없습니다.
여기에 참조하는 부분을 유추해 재구성된 코드가 있으니 참고에 도움이 되기를 바랍니다.
</p>
<p><style>
#addProduct, #addLocal { background-color: olive; width: 20em; }
</style></p>
<p> </p>
<p><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></p>
<p> <li>
addProduct : <div id="addProduct">addProduct display: flex</div>
</li>
<li>
productAmount : <button type="button" value="0" id="productAmount" name="productAmount">productAmount</button>
</li></p>
<p> <li>
addLocal : <div id="addLocal">addLocal display: flex</div>
</li>
<li>
localAmount : <button type="button" value="0" id="localAmount" name="localAmount">localAmount</button>
</li></p>
<p> <li>
result_sum : <input type="text" id="result_sum" name="result_sum" placeholder="총 결제금액" />
</li>
</ul></p>
<p> </p>
<p><script>
const resultSum = document.getElementById("result_sum");//---- 총 결제금액</p>
<p> </p>
<p>const addProduct = document.getElementById("addProduct");
const productAmount = document.getElementById("productAmount");
const addLocal = document.getElementById("addLocal");
const localAmount = document.getElementById("localAmount");</p>
<p> </p>
<p>const productChcbx = document.getElementsByName("productChcbx");
const localCheckboxs = document.getElementsByName("localCheckboxs");</p>
<p> </p>
<p>for (let i = 0; i < productChcbx.length; i++) {
productChcbx[i].addEventListener("click", () => {
let sum = 0;
let cnt = 0;</p>
<p> </p>
<p> 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;
}</p>
<p> </p>
<p> resultSum.value = parseInt(productAmount.value) + parseInt(localAmount.value);
});
}</p>
<p>
for (let k = 0; k < localCheckboxs.length; k++) {
localCheckboxs[k].addEventListener("click", () => {
let sum = 0;
let cnt = 0;</p>
<p> </p>
<p> 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;
}</p>
<p> </p>
<p> resultSum.value = parseInt(productAmount.value) + parseInt(localAmount.value);
});
}</p>
<p> </p>
<p>// from <a href="https://sir.kr/js/common.js" target="_blank" rel="noopener noreferrer">https://sir.kr/js/common.js</a>
function number_format(data)
{</p>
<p> var tmp = '';
var number = '';
var cutlen = 3;
var comma = ',';
var i;</p>
<p> var sign = data.match(/^[\+\-]/);
if(sign) {
data = data.replace(/^[\+\-]/, "");
}</p>
<p> len = data.length;
mod = (len % cutlen);
k = cutlen - mod;
for (i=0; i<data.length; i++)
{
number = number + data.charAt(i);</p>
<p> if (i < data.length - 1)
{
k++;
if ((k % cutlen) == 0)
{
number = number + comma;
k = 0;
}
}
}</p>
<p> if(sign != null)
number = sign+number;</p>
<p> return number;
}
</script></p>
<p>답변에 대한 댓글 3개
10billgod시도해 보시고 기대하는 결과가 나온다면
그게 곧 답이 아닐까 싶습니다.
댓글을 작성하려면 로그인이 필요합니다.
10billgod콘솔로그 찍어봐도 NaN으로 나옵니다...
parsInt랑 number함수도 동일하구요
혹시 몰라 캡처했는데
Amount 두 변수가 input이 아니어서 그런걸까요?
상품 체크박스 체크할때마다 금액이 추가되는 시스템입니다
그리고 두 상품의 합계가 최종적으로 resultSum에 출력되어야 하는거구요
어느정도 알거같다가도 어렵습니다..ㅠ
답변에 대한 댓글 1개
<input인지
<span 인지에 따라
.value
아니면
.innerText를 써야합니다.
댓글을 작성하려면 로그인이 필요합니다.
혹시 콘솔로그로 확인해보셨나요?
숫자형으로 나오는지 확인해보시고 아니면 parsint 나 number 함수로 감싸주세요.
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p>(parseint(<span style="color: rgb(0, 0, 0); font-family: sans-serif; font-size: 17px;">localAmount.value</span><span style="font-size: 1em;">) + parseint(</span>productAmount.value)<span style="font-size: 1em;">)</span></p>
<p>위와 같이 문자을 숫자로 변경해서 해 보세요
답변에 대한 댓글 2개
10billgod아닌가요?
너무 초보적인 질문 죄송합니다...
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
각 조건문에 값이 없을때는 value=0, 더할때는 sum을 각각 넣어주어야 parseInt가 나오는군요..
그럼 한가지만 더 여쭤보고 싶은데
지금 resultSum.value = parseInt(productAmount.value) + parseInt(localAmount.value);
이렇게 되어 있으면 parseInt(productAmount.value) + parseInt(productAmount.value) 이런식으로
같은 상품끼리의 더한 값도 출력하려면
그밑에 같이 넣으면 될까요??