1-2. カウントして表示するJavaScriptを書く
次に、文字数をカウントして表示するためのJavaScriptを記述します。 これは、以下のソースをそのままコピー＆ペーストするだけで構いません。（修正不要です。）
function ShowLength( idn, str ) {
document.getElementById(idn).innerHTML = str.length + "文字";
}
// --></script>
上記では、先ほどのonkeyupイベントハンドラで呼び出される「ShowLength」関数を作っています。 処理内容は非常に簡単で、第2引数（str）で渡された文字列の長さ（length）を数えて、 第1引数（idn）で渡された名称でidが振られている要素の内容(innerHTML)を書き換えているだけです。
上記のJavaScriptについて、簡単に解説しておきます。（読み飛ばしても構いません。上記のソースはそのままコピー＆ペーストするだけで動きますから。）
●function ShowLength( idn, str ) {
「ShowLength」という関数を作っています。1つ目の引数（idn）は、文字数を表示する要素に割り振られたID名です。 2つ目の引数（str）には、ユーザが入力欄に入力した文字列がそのまま含まれています。
●str.length + "文字"
変数strにはユーザが入力した文字列が格納されています。 「str.length」のようにlengthプロパティを参照することで、その文字数が得られます。（例えば、120など） その直後に「文字」という文字列を加えることで、「120文字」などのような文字列ができあがります。
この「文字」という文字列は、何でも自由に書き換えて構いません。「もじ」に書き換えれば「120もじ」などのように表示されます。何でも記述できますが、引用符で囲むのを忘れないで下さい。
●document.getElementById(idn).innerHTML
あとは、getElementByIdメソッドにID名（idn変数）を渡すことで出力位置を特定し、 innerHTMLプロパティを使って、対象の要素の内容を書き換えています。
※したがって、getElementByIdメソッドやinnerHTMLプロパティの扱えない、かなり古いブラウザでは動きません。
以上で、テキストエディタのステータスバーなどのように、「入力された文字列の数をカウントして表示」する機能ができあがります。
上記のHTML・JavaScriptを表示させると、以下のように見えます。
実際に入力欄に何か入力してみて下さい。文字数がリアルタイムに変化するはずです。
0文字
0文字
なお、同一ページ内に入力欄をいくつ設置する場合でも、JavaScriptソースの記述は1つだけで構いません。
次に、指定した文字数からカウントダウンして表示するソースをご紹介いたします。
