JS) 장바구니 금액, 수량 합계 구현

ajax를 아직 배우진 않은 나로서 할 수 있는 최대의 구현은 js를 활용하는 방법 뿐이라는 생각에 머리아프게 구현해보았다.

html code

<input type="checkbox" value=1000000 name="checkedBox" onclick="changeEvent()"> 이것이 자바다 </div>
                                  <div class="col-5">PYTHON JAVA HTML</div>
                                  <div class="col-2">냥냥맨</div>
                                  <div class="col-2 sale">1000000원</div>

  const totals = document.querySelector("#totals");
  const counts = document.querySelector("#counts");

  function changeEvent() {
    let total = 0;
    let count = 0;

    for(var i=0; i<inputList.length; i++){
        if(inputList[i].checked) {
            total += parseInt(inputList[i].value);
            count += 1;
        }
    }
    total = total.toLocaleString();
    totals.innerText = `total: ${total}원`;
    counts.innerText = `총 : ${count} 개`;
  }

자바스크립트 내용이다. 처음에는 뭐가 안되었는데 for( x in y) 로 하게 되면 .checked가 console에 제대로 나오지 않았다. 그래서 위에 해당하는 for문 처럼 작성을 하게 되고 value 값을 가져오는데 숫자가 아닌 문자로 가져와서 parseInt를 통해 변환작업을 거쳐 주었다.

그런데 tatal을 1000000원이 아닌 1,000,000원 처럼 나타내고 싶어서 몇시간에 걸쳐 검색과 시도해본 결과 모질라 래퍼에 친절하게 안내되어 있었다....;;

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

toLocaleString을 위 말고도 다양하게 사용할 수 있으니 다음에 참고해야겠다.

이벤트 리스너를 add로 배웠는데 input에도 가지고 있어서 직접 활용해 보았다.
click을 하면 changeEvent() function을 실행하도록..

<2월 6일 수정>
회계 표시 단위인 1,000원으로 나타내져 있을 때 위 같은 방법으로 하게 되면 , 앞에 숫자만 가져오는 점을 발견되어 parseInt 부분을 수정했다.

replace와 정규식을 활용해 전체 ,를 ""로 변경하고 뒤에 '원' 도 제거하는 식이 된다.

if(inputList[i].checked) {
            var cost = sales[i].innerText.substring(0, sales[i].innerText.indexOf("원"));
            cost = cost.replaceAll(/,/g, "");
            total += parseInt(cost);
            count += 1;
        }