How can i Add two For statement value

Question

I want In the for statement add two values

resultSum.value = number_format(parseInt(productAmount.value));

resultSum.value = number_format(parseInt(localAmount.value));

But, sum separately

How can i sum productAmount.value + localAmount.value?

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) {
                cnt++;
                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(sum) + "원";
                    productAmount.value = sum;
                }
            } else if (!productChcbx[j].checked) {
                if (cnt == 0) {
                    addProduct.style.display = "none";
                    productAmount.value = 0;
                }
            }
        }
        resultSum.value = number_format(parseInt(productAmount.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) {
                cnt++;
                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(sum) + "원";
                    localAmount.value = sum;
                }
            } else if (!localCheckboxs[h].checked) {
                if (cnt == 0) {
                    addLocal.style.display = "none";
                    localAmount.value = 0;
                }
            }
        }
            resultSum.value = number_format(parseInt(localAmount.value));
    })
}

resultSum.value = parseInt(productAmount.value) + parseInt(localAmount.value);

if do this code it is possible to add but can't productAmount.value + productAmount.value / localAmount.value + localAmount.value Could you give me a best resolving? Thank you!

Answer 1

I think I understand the question to ask how the click handler for one set of checkboxes can include the result of a click handler from the other set. The answer is to factor the calculation code from the handlers into functions that both may share.

(1) Factor the math into functions that do only math. Something like the following (many more improvements can be made to these functions, but I've left mostly intact so the OP can recognize the existing logic...)

// these two functions do only math on numerical values

const computeProductSum = () => {
  let cnt = 0,
    result = 0
  for (let j = 0; j < productChcbx.length; j++) {
    if (productChcbx[j].checked) {
      cnt++;
      if (cnt == 1) {
        result = 70000;
      } else if (cnt > 1) {
        result = 70000 + 60000 * (cnt - 1);
      }
    } else {
      if (cnt == 0) {
        result = 0;
      }
    }
  }
  return result
}

const computeLocalSum = () => {
  let cnt = 0,
    result = 0
  for (let j = 0; j < localCheckboxs.length; j++) {
    if (localCheckboxs[j].checked) {
      cnt++;
      if (cnt == 1) {
        result = 150000;
      } else if (cnt > 1) {
        result = 150000 + 100000 * (cnt - 1);
      }
    } else {
      if (cnt == 0) {
        result = 0;
      }
    }
  }
  return result
}

(2) Factor the ability to take a numeric value and convert it to formatted html...

const formatHtml = number => {
  return number_format(number) + "원";
}

(3) With these tools factored out (if I understand the logic goal of the OP correctly) we can perform the math calculations for both types in the same click handler for both types of checkbox...

// both checkbox types can share this code
const checkboxClick = () => {
  const sum = computeProductSum() + computeLocalSum()
  resultSum.value = formatHtml(sum)
}

(4) Attach the same function to all checkboxes...

for (let i = 0; i < productChcbx.length; i++) {
    productChcbx[i].addEventListener("click", checkboxClick);
}

for (let k = 0; k < localCheckboxs.length; k++) {
    localCheckboxs[k].addEventListener("click", checkboxClick)
}

EDIT Once this is working, the improvement to the math is as follows: we want a function that assigns a numerical value to the first checkbox checked, and another value for all of the others.

// for the list of checkboxes, compute a weighted sum for the checked ones
const computeCheckboxSum = (list, firstWeight, weight) => {
  const count = list.reduce((sum, el) => sum + (el.checked ? 1 : 0), 0);
  return count ? firstWeight + (count-1)*weight : 0
}

Use that to substantially reduce the code in the two compute functions we wrote earlier...

const computeProductSum = () => {
  return computeCheckboxSum = (productChcbx, 70000, 60000);
}

const computeLocalSum = () => {
  return computeCheckboxSum = (localCheckboxs, 150000, 100000);
}