formからjavascriptへ値を渡してhtmlで表示する

主にjQuery Mobileなどのちょっとしたウェブアプリでまた使いそうなのでメモ。

formのtype=textで値を入力できるようにし、送信ボタンでfunc()を呼び出す。
その後、func()内で入力した値を受け取り、再度値をセットする。

そんな、サンプルコード。

index.html

<script type="text/javascript" src="func.js"></script>

<form name="param" action="#">
<input type="text" id="num">
<input type="button" value="送信" onClick="func()">
</form>
<div id="answer"></div>

func.js

function func() {
  var x = document.getElementById('num').value;
  numx = parseInt(x);
  numx = numx + 1;
  document.getElementById('answer').innerHTML = numx;
}