2026, 새로운 도약을 시작합니다.

고수님들 이식중 합산을 얻을 수 있을까요? 채택완료

2년 전 조회 2,454

<p id="result1"></p>
<p id="result2"></p>
<p id="result3"></p>
<p id="result4"></p>
<p id="result5"></p>

이 것은 각각 wr_35, wr_36 ~ wr_75, wr_76  에 두값이 곱한 것을 보여주는 5개의 식인데요 

이것을 전부 합산한 한개의 결과를 보여줄 수 가 있나요?

<p id="result1"></p>  =이것은 숨기고싶고 위에 5개의 식을 전부 더한 것만 보이고싶습니다. 

ㅜ.ㅜ

Copy


 











 

  







  // 텍스트 박스 값이 변경될 때마다 곱셈을 수행하는 함수

 var wr_35 = document.getElementById("wr_35");

var wr_36 = document.getElementById("wr_36");

var result1 = document.getElementById("result1");

var wr_45 = document.getElementById("wr_45");

var wr_46 = document.getElementById("wr_46");

var result2 = document.getElementById("result2");

var wr_55 = document.getElementById("wr_55");

var wr_56 = document.getElementById("wr_56");

var result3 = document.getElementById("result3");

var wr_65 = document.getElementById("wr_65");

var wr_66 = document.getElementById("wr_66");

var result4 = document.getElementById("result4");

var wr_75 = document.getElementById("wr_75");

var wr_76 = document.getElementById("wr_76");

var result5 = document.getElementById("result5");

wr_35.addEventListener("input", calculate1);

wr_36.addEventListener("input", calculate1);

wr_45.addEventListener("input", calculate2);

wr_46.addEventListener("input", calculate2);

wr_55.addEventListener("input", calculate3);

wr_56.addEventListener("input", calculate3);

wr_65.addEventListener("input", calculate4);

wr_66.addEventListener("input", calculate4);

wr_75.addEventListener("input", calculate5);

wr_76.addEventListener("input", calculate5);

function calculate1() {

  var value1 = parseFloat(wr_35.value);

  var value2 = parseFloat(wr_36.value);

  if (!isNaN(value1) && !isNaN(value2)) {

    var multiplication = value1 * value2;

    result1.textContent = "곱한 값: " + multiplication;

  } else {

    result1.textContent = "";

  }

}

function calculate2() {

  var value1 = parseFloat(wr_45.value);

  var value2 = parseFloat(wr_46.value);

  if (!isNaN(value1) && !isNaN(value2)) {

    var multiplication = value1 * value2;

    result2.textContent = "곱한 값: " + multiplication;

  } else {

    result2.textContent = "";

  }

}

function calculate3() {

  var value1 = parseFloat(wr_55.value);

  var value2 = parseFloat(wr_56.value);

  if (!isNaN(value1) && !isNaN(value2)) {

    var multiplication = value1 * value2;

    result3.textContent = "곱한 값: " + multiplication;

  } else {

    result3.textContent = "";

  }

}

function calculate4() {

  var value1 = parseFloat(wr_65.value);

  var value2 = parseFloat(wr_66.value);

  if (!isNaN(value1) && !isNaN(value2)) {

    var multiplication = value1 * value2;

    result4.textContent = "곱한 값: " + multiplication;

  } else {

    result4.textContent = "";

  }

}

function calculate5() {

  var value1 = parseFloat(wr_75.value);

  var value2 = parseFloat(wr_76.value);

  if (!isNaN(value1) && !isNaN(value2)) {

    var multiplication = value1 * value2;

    result5.textContent = "곱한 값: " + multiplication;

  } else {

    result5.textContent = "";

  }

}

 

답변 3개

채택된 답변
+20 포인트

다음과 같은 방법도 있으니 참고 해보세요

Copy
















  var wr_35 = document.getElementById("wr_35");

  var wr_36 = document.getElementById("wr_36");

  var result1 = document.getElementById("result1");

  var wr_45 = document.getElementById("wr_45");

  var wr_46 = document.getElementById("wr_46");

  var result2 = document.getElementById("result2");

  var wr_55 = document.getElementById("wr_55");

  var wr_56 = document.getElementById("wr_56");

  var result3 = document.getElementById("result3");

  var wr_65 = document.getElementById("wr_65");

  var wr_66 = document.getElementById("wr_66");

  var result4 = document.getElementById("result4");

  var wr_75 = document.getElementById("wr_75");

  var wr_76 = document.getElementById("wr_76");

  var result5 = document.getElementById("result5");

  var sumResult = document.getElementById("sumResult");

  wr_35.addEventListener("input", calculateAndSum);

  wr_36.addEventListener("input", calculateAndSum);

  wr_45.addEventListener("input", calculateAndSum);

  wr_46.addEventListener("input", calculateAndSum);

  wr_55.addEventListener("input", calculateAndSum);

  wr_56.addEventListener("input", calculateAndSum);

  wr_65.addEventListener("input", calculateAndSum);

  wr_66.addEventListener("input", calculateAndSum);

  wr_75.addEventListener("input", calculateAndSum);

  wr_76.addEventListener("input", calculateAndSum);

  function calculateAndSum() {

    var value1_1 = parseFloat(wr_35.value);

    var value1_2 = parseFloat(wr_36.value);

    var value2_1 = parseFloat(wr_45.value);

    var value2_2 = parseFloat(wr_46.value);

    var value3_1 = parseFloat(wr_55.value);

    var value3_2 = parseFloat(wr_56.value);

    var value4_1 = parseFloat(wr_65.value);

    var value4_2 = parseFloat(wr_66.value);

    var value5_1 = parseFloat(wr_75.value);

    var value5_2 = parseFloat(wr_76.value);

    var sum = 0;

    if (!isNaN(value1_1) && !isNaN(value1_2)) {

      var multiplication1 = value1_1 * value1_2;

      result1.textContent = "곱한 값: " + multiplication1;

      sum += multiplication1;

    } else {

      result1.textContent = "";

    }

    if (!isNaN(value2_1) && !isNaN(value2_2)) {

      var multiplication2 = value2_1 * value2_2;

      result2.textContent = "곱한 값: " + multiplication2;

      sum += multiplication2;

    } else {

      result2.textContent = "";

    }

    if (!isNaN(value3_1) && !isNaN(value3_2)) {

      var multiplication3 = value3_1 * value3_2;

      result3.textContent = "곱한 값: " + multiplication3;

      sum += multiplication3;

    } else {

      result3.textContent = "";

    }

    if (!isNaN(value4_1) && !isNaN(value4_2)) {

      var multiplication4 = value4_1 * value4_2;

      result4.textContent = "곱한 값: " + multiplication4;

      sum += multiplication4;

    } else {

      result4.textContent = "";

    }

    if (!isNaN(value5_1) && !isNaN(value5_2)) {

      var multiplication5 = value5_1 * value5_2;

      result5.textContent = "곱한 값: " + multiplication5;

      sum += multiplication5;

    } else {

      result5.textContent = "";

    }

    sumResult.textContent = "합산 값: " + sum;

  }

<p id="result1"></p> 요소는 display: none; 스타일을 가지도록 변경하여 숨김 처리. 계산 결과를 누적하여 합산한 값을 sumResult라는 새로운 <p> 요소에 표시하도록 추가. 5개의 계산 결과는 각각의 <p> 요소에 표시되고, 전체 합산 결과는 sumResult 요소에 표시.

이렇게 하면 원하시는 결과값을 얻을 수 있지 않을까 생각합니다

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

감사합니다.

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

Php에서 하시면 더 수월할 듯합니다.

로그인 후 평가할 수 있습니다

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

Copy




#result1, #result2, #result3, #result4, #result5 {

  display: none;

}



 





















 













sum of all





  // 텍스트 박스 값이 변경될 때마다 곱셈을 수행하는 함수

 var wr_35 = document.getElementById("wr_35");

var wr_36 = document.getElementById("wr_36");

var result1 = document.getElementById("result1");

var wr_45 = document.getElementById("wr_45");

var wr_46 = document.getElementById("wr_46");

var result2 = document.getElementById("result2");

var wr_55 = document.getElementById("wr_55");

var wr_56 = document.getElementById("wr_56");

var result3 = document.getElementById("result3");

var wr_65 = document.getElementById("wr_65");

var wr_66 = document.getElementById("wr_66");

var result4 = document.getElementById("result4");

var wr_75 = document.getElementById("wr_75");

var wr_76 = document.getElementById("wr_76");

var result5 = document.getElementById("result5");

wr_35.addEventListener("input", calculate1);

wr_36.addEventListener("input", calculate1);

wr_45.addEventListener("input", calculate2);

wr_46.addEventListener("input", calculate2);

wr_55.addEventListener("input", calculate3);

wr_56.addEventListener("input", calculate3);

wr_65.addEventListener("input", calculate4);

wr_66.addEventListener("input", calculate4);

wr_75.addEventListener("input", calculate5);

wr_76.addEventListener("input", calculate5);

function calculate1() {

  var value1 = parseFloat(wr_35.value);

  var value2 = parseFloat(wr_36.value);

  if (!isNaN(value1) && !isNaN(value2)) {

    var multiplication = value1 * value2;

    result1.textContent = "곱한 값: " + multiplication;

  } else {

    result1.textContent = "";

  }

  sum_of_all();

}

function calculate2() {

  var value1 = parseFloat(wr_45.value);

  var value2 = parseFloat(wr_46.value);

  if (!isNaN(value1) && !isNaN(value2)) {

    var multiplication = value1 * value2;

    result2.textContent = "곱한 값: " + multiplication;

  } else {

    result2.textContent = "";

  }

  sum_of_all();

}

function calculate3() {

  var value1 = parseFloat(wr_55.value);

  var value2 = parseFloat(wr_56.value);

  if (!isNaN(value1) && !isNaN(value2)) {

    var multiplication = value1 * value2;

    result3.textContent = "곱한 값: " + multiplication;

  } else {

    result3.textContent = "";

  }

  sum_of_all();

}

function calculate4() {

  var value1 = parseFloat(wr_65.value);

  var value2 = parseFloat(wr_66.value);

  if (!isNaN(value1) && !isNaN(value2)) {

    var multiplication = value1 * value2;

    result4.textContent = "곱한 값: " + multiplication;

  } else {

    result4.textContent = "";

  }

  sum_of_all();

}

function calculate5() {

  var value1 = parseFloat(wr_75.value);

  var value2 = parseFloat(wr_76.value);

  if (!isNaN(value1) && !isNaN(value2)) {

    var multiplication = value1 * value2;

    result5.textContent = "곱한 값: " + multiplication;

  } else {

    result5.textContent = "";

  }

  sum_of_all();

}

 

function sum_of_all() {

  var arr =  [result1, result2, result3, result4, result5];

  var num = 0;

  for (var i = 0, i_len = arr.length; i  i_len; i++) {

    var num_each = arr[i].textContent.replace(/[^\d\.-]+/g, '');

    num += Number(num_each);

  }

  document.getElementById('sum_of_all').textContent = num;

}



로그인 후 평가할 수 있습니다

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

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

로그인
🐛 버그신고