簡単な計算を行うフォームです。
合計: |
ソース
html
<form action="" method="post">
<table class=" aligncenter" style="width: 564px; height: 158px;">
<caption>入力</caption>
<tbody>
<tr style="height: 18px;">
<th class="table-style5" style="height: 18px; width: 16.4993%;" align="center">項目</th>
<th class="table-style5" style="height: 18px; width: 18.7948%;" align="center">値</th>
<th class="table-style5" style="height: 18px; width: 12.769%;" align="center">項目</th>
<th class="table-style5" style="height: 18px; width: 18.6514%;" align="center">値</th>
</tr>
<tr style="height: 20px;">
<td class="table-style6" style="height: 20px; width: 16.4993%;" align="center">T<sub>1</sub></td>
<th class="table-style6" style="height: 20px; width: 18.7948%;"><input id="field11" style="width: 90px;" name="field11" size="8" type="text" value="1"></th>
<td class="table-style6" style="height: 20px; width: 12.769%;" align="center">T<sub>2</sub></td>
<th class="table-style6" style="height: 20px; width: 18.6514%;"><input id="field12" style="width: 90px;" name="field12" size="8" type="text" value="2"></th>
</tr>
</tbody>
</table>
</form>
<p><input id="field8" class="aligncenter" style="width: 95px; height: 25px;" type="button" value="計算" align="middle"></p>
<!-- wp:table -->
<div align="center"><table style="width: 290px;"><tbody><tr><td>合計:</td><td><input id="field61" class="aligncenter" style="width: 90px;" name="field61" size="8" type="text" value="-"></td></tr></tbody></table></div>
<!-- /wp:table -->
<div align="center"><textarea id="field62" name="field62" readonly="readonly"></textarea></div>
css
<style>
textarea{
width: calc( 1.8em * 12 );
height: calc( 1.8em * 8 );
line-height: 1.1;
font-size: 18px;
background-color: #d8d8d8;
}
</style>
Js
<script>
window.onload = function () {
document.getElementById("field8").onclick = function () {
calc_textBox();}
}
function calc_textBox(){
T1 =parseFloat(document.getElementById("field11").value);
T2 = parseFloat(document.getElementById("field12").value) ;
result=0;
result = T1 + T2;
var content62 ="";
content62 +="";
document.getElementById("field61").value = result;
content62 +="入力T1:" ;
content62 +=T1 + '\n';
content62 +="入力T2:" ;
content62 +=T2 + '\n';
content62 +="-------------------" + '\n';
content62 +="結果:" ;
content62 +=result + '\n';
document.getElementById("field62").value = content62;
}
</script>
コメント