1. 作成物

A030 テキストボックス入力


簡単な計算を行うフォームです。

入力
項目 項目
T1 T2

合計:

ソース

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>

コメント