고수님들 이식중 합산을 얻을 수 있을까요?
본문
<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개의 식을 전부 더한 것만 보이고싶습니다.
ㅜ.ㅜ
<p id="result1"></p>
<p id="result2"></p>
<p id="result3"></p>
<p id="result4"></p>
<p id="result5"></p>
<script>
// 텍스트 박스 값이 변경될 때마다 곱셈을 수행하는 함수
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 = "";
}
}
</script>답변 3
다음과 같은 방법도 있으니 참고 해보세요
<p id="result1" style="display: none;"></p>
<p id="result2"></p>
<p id="result3"></p>
<p id="result4"></p>
<p id="result5"></p>
<p id="sumResult"></p>
<script>
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;
}
</script>
<p id="result1"></p> 요소는 display: none; 스타일을 가지도록 변경하여 숨김 처리. 계산 결과를 누적하여 합산한 값을 sumResult라는 새로운 <p> 요소에 표시하도록 추가. 5개의 계산 결과는 각각의 <p> 요소에 표시되고, 전체 합산 결과는 sumResult 요소에 표시.
이렇게 하면 원하시는 결과값을 얻을 수 있지 않을까 생각합니다
감사합니다.
<style>
#result1, #result2, #result3, #result4, #result5 {
display: none;
}
</style>
<input type="text" id="wr_35" value="1">
<input type="text" id="wr_36" value="2">
<input type="text" id="wr_45" value="3">
<input type="text" id="wr_46" value="4">
<input type="text" id="wr_55" value="5">
<input type="text" id="wr_56" value="6">
<input type="text" id="wr_65" value="7">
<input type="text" id="wr_66" value="8">
<input type="text" id="wr_75" value="9">
<input type="text" id="wr_76" value="10">
<p id="result1"></p>
<p id="result2"></p>
<p id="result3"></p>
<p id="result4"></p>
<p id="result5"></p>
<h3>sum of all</h3>
<p id="sum_of_all"></p>
<script>
// 텍스트 박스 값이 변경될 때마다 곱셈을 수행하는 함수
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;
}
</script>
Php에서 하시면 더 수월할 듯합니다.
답변을 작성하시기 전에 로그인 해주세요.