고수님들 이식중 합산을 얻을 수 있을까요? 채택완료
<p id="result1">
이 것은 각각 wr_35, wr_36 ~ wr_75, wr_76 에 두값이 곱한 것을 보여주는 5개의 식인데요
이것을 전부 합산한 한개의 결과를 보여줄 수 가 있나요?
<p id="result1">
=이것은 숨기고싶고 위에 5개의 식을 전부 더한 것만 보이고싶습니다.ㅜ.ㅜ
</strong></p>
<p> </p>
<p><strong><</strong>p id="result1"></p>
<p id="result2"></p>
<p id="result3"></p>
<p id="result4"></p>
<p id="result5"></p>
</p>
<p> </p>
<p>
<script></p>
<p>
// 텍스트 박스 값이 변경될 때마다 곱셈을 수행하는 함수
var wr_35 = document.getElementById("wr_35");
var wr_36 = document.getElementById("wr_36");
var result1 = document.getElementById("result1");</p>
<p>var wr_45 = document.getElementById("wr_45");
var wr_46 = document.getElementById("wr_46");
var result2 = document.getElementById("result2");</p>
<p>var wr_55 = document.getElementById("wr_55");
var wr_56 = document.getElementById("wr_56");
var result3 = document.getElementById("result3");</p>
<p>var wr_65 = document.getElementById("wr_65");
var wr_66 = document.getElementById("wr_66");
var result4 = document.getElementById("result4");</p>
<p>var wr_75 = document.getElementById("wr_75");
var wr_76 = document.getElementById("wr_76");
var result5 = document.getElementById("result5");</p>
<p>wr_35.addEventListener("input", calculate1);
wr_36.addEventListener("input", calculate1);</p>
<p>wr_45.addEventListener("input", calculate2);
wr_46.addEventListener("input", calculate2);</p>
<p>wr_55.addEventListener("input", calculate3);
wr_56.addEventListener("input", calculate3);</p>
<p>wr_65.addEventListener("input", calculate4);
wr_66.addEventListener("input", calculate4);</p>
<p>wr_75.addEventListener("input", calculate5);
wr_76.addEventListener("input", calculate5);</p>
<p>function calculate1() {
var value1 = parseFloat(wr_35.value);
var value2 = parseFloat(wr_36.value);</p>
<p> if (!isNaN(value1) && !isNaN(value2)) {
var multiplication = value1 * value2;
result1.textContent = "곱한 값: " + multiplication;
} else {
result1.textContent = "";
}
}</p>
<p>function calculate2() {
var value1 = parseFloat(wr_45.value);
var value2 = parseFloat(wr_46.value);</p>
<p> if (!isNaN(value1) && !isNaN(value2)) {
var multiplication = value1 * value2;
result2.textContent = "곱한 값: " + multiplication;
} else {
result2.textContent = "";
}
}</p>
<p>function calculate3() {
var value1 = parseFloat(wr_55.value);
var value2 = parseFloat(wr_56.value);</p>
<p> if (!isNaN(value1) && !isNaN(value2)) {
var multiplication = value1 * value2;
result3.textContent = "곱한 값: " + multiplication;
} else {
result3.textContent = "";
}
}</p>
<p>function calculate4() {
var value1 = parseFloat(wr_65.value);
var value2 = parseFloat(wr_66.value);</p>
<p> if (!isNaN(value1) && !isNaN(value2)) {
var multiplication = value1 * value2;
result4.textContent = "곱한 값: " + multiplication;
} else {
result4.textContent = "";
}
}</p>
<p>function calculate5() {
var value1 = parseFloat(wr_75.value);
var value2 = parseFloat(wr_76.value);</p>
<p> if (!isNaN(value1) && !isNaN(value2)) {
var multiplication = value1 * value2;
result5.textContent = "곱한 값: " + multiplication;
} else {
result5.textContent = "";
}
}
</script><strong>
답변 3개
다음과 같은 방법도 있으니 참고 해보세요
</p>
<p><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></p>
<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");</p>
<p> 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);</p>
<p> 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);</p>
<p> var sum = 0;</p>
<p> if (!isNaN(value1_1) && !isNaN(value1_2)) {
var multiplication1 = value1_1 * value1_2;
result1.textContent = "곱한 값: " + multiplication1;
sum += multiplication1;
} else {
result1.textContent = "";
}</p>
<p> if (!isNaN(value2_1) && !isNaN(value2_2)) {
var multiplication2 = value2_1 * value2_2;
result2.textContent = "곱한 값: " + multiplication2;
sum += multiplication2;
} else {
result2.textContent = "";
}</p>
<p> if (!isNaN(value3_1) && !isNaN(value3_2)) {
var multiplication3 = value3_1 * value3_2;
result3.textContent = "곱한 값: " + multiplication3;
sum += multiplication3;
} else {
result3.textContent = "";
}</p>
<p> if (!isNaN(value4_1) && !isNaN(value4_2)) {
var multiplication4 = value4_1 * value4_2;
result4.textContent = "곱한 값: " + multiplication4;
sum += multiplication4;
} else {
result4.textContent = "";
}</p>
<p> if (!isNaN(value5_1) && !isNaN(value5_2)) {
var multiplication5 = value5_1 * value5_2;
result5.textContent = "곱한 값: " + multiplication5;
sum += multiplication5;
} else {
result5.textContent = "";
}</p>
<p> sumResult.textContent = "합산 값: " + sum;
}
</script>요소는 display: none; 스타일을 가지도록 변경하여 숨김 처리. 계산 결과를 누적하여 합산한 값을 sumResult라는 새로운
요소에 표시하도록 추가. 5개의 계산 결과는 각각의
요소에 표시되고, 전체 합산 결과는 sumResult 요소에 표시.
이렇게 하면 원하시는 결과값을 얻을 수 있지 않을까 생각합니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p><style>
#result1, #result2, #result3, #result4, #result5 {
display: none;
}
</style></p>
<p> </p>
<p><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>
<p>
<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></p>
<p><script></p>
<p> // 텍스트 박스 값이 변경될 때마다 곱셈을 수행하는 함수
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 = "";
}</p>
<p> 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 = "";
}</p>
<p> 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 = "";
}</p>
<p> 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 = "";
}</p>
<p> 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 = "";
}</p>
<p> sum_of_all();
}</p>
<p> </p>
<p>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></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인