자바스크립트 클릭할때 마다 금액을 올리는 코드가 이게 틀렸나요?
본문
체크박스 28개가 있는데 모두 같은 클래스를 부여했고,
금액은 70,000원으로 고정되어 있는데 2개 이상 하나씩 추가할때 마다 60,000원씩 더하고 싶습니다
코드를 보자면
const addProduct = document.getElementById("services10");----> 상품과 금액이 기재되어 있는 <div>
const proCheckboxs = document.querySelectorAll(".product_chckb");---->28개의 체크박스
let productAmount = document.querySelector(".product_amount");----> 금액이 기재되어 있는 <span>
for (let i = 0; i < proCheckboxs.length; i++) {
proCheckboxs[i].addEventListener("click", function() {
if(proCheckboxs[i].checked = 1){
addProduct.style.display = "flex"
} else if(proCheckboxs[i].checked = 2){
addProduct.style.display = "flex"
productAmount.innerHTML = "130,000원"
}
});
}
자바스크립트 초보라 구글링하면서 있는 예제코드들 수정해가면서 하는데
잘 되지가 않습니다..
팁 좀 주시면 감사하겠습니다!
답변 2
for (let i = 0; i < proCheckboxs.length; i++) proCheckboxs[i].addEventListener("click", sumclick);
function sumclick(){
let cnt=0;
for (let i = 0; i < proCheckboxs.length; i++)
if(proCheckboxs[i].checked ) cnt++;
if( cnt==1)
productAmount.innerHTML = "70,000원";
else If( cnt>1){
sum=70000+60000*(cnt-1);
productAmount.innerHTML=number_format( sum)+"원";
} else if( cnt<1)
productAmount.innerHTML="상품을 선택하세요.";
}
}
number_format() 함수는 그누보드에 있습니다.
댓글 감사합니다
엑스엠엘님이 적어주신 코드로 했을때 안돼서
제가 다시 좀 바꿧는데
for(let i = 0; i < proCheckboxs.length; i++){
proCheckboxs[i].addEventListener("click", function(){
let cnt=0;
if(proCheckboxs[i].checked){
cnt ++;
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 (cnt < 1){
productAmount.innerHTML = "상품을 선택하세요";
}
}
});
}
1개 클릭 시 70,000원은 노출이되는데 2개 이상클릭했을때도 70,000으로 나옵니다...
이렇게는 안되는걸까요?
이벤트 핸들러를 바로 지정하는 경우
cnt를 계산하기 위해서
loop또 돌려야 합니다.
for(let i = 0; i < proCheckboxs.length; i++){
proCheckboxs[i].addEventListener("click", function(){
let cnt=0;
for(let ii = 0; ii < proCheckboxs.length; ii++)
if(proCheckboxs[ii].checked) cnt++;
if( cnt > 1) ....
자바스크립트 공부 더 열심히 해야겠습니다...ㅜㅜㅜ
감사합니다!
<script>
$(document).ready(function(){
var productAmount = $('.product_amount').val();
var tot_amount = productAmount;
var increase = 60000;
$('.product_chckb').each(function(i){
$(this).click(function(e){
if($('.product_chckb:checked').length >= 2){
tot_amount = productAmount + ($('.product_chckb:checked').length - 1)*increase;
}else{
tot_amount = productAmount;
}
});
});
});
</script>
checked가 잘 동작할 지 모르겠지만...
이런식으로 length를 이용해서 증가시키고 아닐때는 초기화하는 코드가 필요할 듯 싶네요
개노미님 댓글 감사합니다~
$(document).ready(function(){
var productAmount = $('.product_amount').val();
var tot_amount = productAmount;
var increase = 60000;
$('.product_chckb').each(function(i){
$(this).click(function(e){
if($('.product_chckb:checked').length = 1){
$('.services10').css('display', 'flex');
}else if($('.product_chckb:checked').length >= 2){
tot_amount = productAmount + ($('.product_chckb:checked').length - 1)*increase;
} else {
tot_amount = productAmount;
}
});
});
});
이렇게 하면 처음 클릭했을때는 기재해놓은 70,000원이 노출되고
두번 이상 클릭시 60,000원이 +되어야 하는데 70,000원만 나오는 이유가 뭘까요...?ㅜ