Hello, World!
이전 목록 다음
채택완료

자바스크립트 클릭할때 마다 금액을 올리는 코드가 이게 틀렸나요?

10billgod
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 1,527

체크박스 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개 / 댓글 5개

채택된 답변
+20 포인트
엑엑스엠엘
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전

    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="상품을 선택하세요.";

                }

}

답변에 대한 댓글 4개

엑스엠엘
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
number_format() 함수는 그누보드에 있습니다.
10billgod
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
댓글 감사합니다
엑스엠엘님이 적어주신 코드로 했을때 안돼서

제가 다시 좀 바꿧는데

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으로 나옵니다...
이렇게는 안되는걸까요?
엑스엠엘
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
이벤트 핸들러를 바로 지정하는 경우
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) ....
10billgod
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
자바스크립트 공부 더 열심히 해야겠습니다...ㅜㅜㅜ
감사합니다!
개개노미
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전

Copy 
<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를 이용해서 증가시키고 아닐때는 초기화하는 코드가 필요할 듯 싶네요

답변에 대한 댓글 1개

10billgod
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
개노미님 댓글 감사합니다~

$(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원만 나오는 이유가 뭘까요...?ㅜ

답변을 작성하려면 로그인이 필요합니다.