今回は、JavascriptからHTMLのテキストやタグを書き換える方法について説明します。
メール機能やタイムライン機能などを構成する上で、入力欄としてテキストボックスを配置した際には「文字数が多すぎる場合」や「何も入力せずに送信しようとした場合」にエラーメッセージを表示させたいですよね。
そんなとき、空のdivタグを利用する方法があります。入力欄の上部に空のdivタグを配置しておき、エラー時にはここにメッセージを表示することを考えます。
具体的にはJavascriptで
document.getElementById("errormessage").textContent="テキストのみ書き換える内容";
や
document.getElementById("errormessage").innerHTML="タグも含んだ内容で書き換える";
と記述します。document.getElementByIdは()内に示すid属性を持つ要素を指定する役割があります。ちなみにdojo.ById()などもほとんど同様に使えます。上で示した例では、id属性がerrormessageのものを指定しています。
.testContextは前の部分で指定されたIDを持つ要素に対して、中身のテキストを書き換えるために記述します。そして=の右に新しく書き換える内容を記述します。 .innerHTMLではタグも含んだ内容で書き換えることができるようです。例えば文字を太くするbタグを利用すれば
document.getElementById("errormessage").innerHTML="タグも含んだ<b>内容</b>で書き換える";
とすることで「内容」という部分が太文字になります。
以上で述べた内容を、文字数の制限を超えた場合や入力がなかった場合を判定するコードを組み合わせることで、エラーメッセージを表示する機能が作成できます。
余談で注意を述べますが、document.getElementByIdなどの書き方はブラウザによっては認識されないこともあるようです。想定ているブラウザで動作するか確認したほうが良いでしょう。
