[JS]クリックでテキストエリアに説明を表示

リンクの説明、Javascriptのコード表示、バナーのURL表示に使えるテクニックです。

<p><input name="code" id="code" type="text" size="50" /></p>
<ul><li><a href="javascript:Code(0)">TOP</a></li>
  <li><a href="javascript:Code(1)">ABOUT</a></li>
  <li><a href="javascript:Code(2)">PHOTO</a></li>
  <li><a href="javascript:Code(3)">LINK</a></li>
</ul>

var txt = new Array();
txt[0]="トップページ";
txt[1]="このサイトについて";
txt[2]="ギャラリー";
txt[3]="リンク";

window.onload=function(){
	document.getElementById('code').innerHTML='ここに説明がでます';
}

function Code($id) {
	var area =document.getElementById('code');
	area.value = txt[$id];
	//area.select(); 選択状態にする
}

説明は配列に入れる。
txtの後に続く[]大カッコに連番数字を入れる。
対応する数字を呼び出すときに使用すれば、Code(0)ならtxt[0]、Code1ならtxt[1]の説明が表示されます。

表示先はgetElementByIdで取得したIDを持つinputもしくはtextareaです。

ブロック要素等、valueが使えないものの場合は次のようになります。

<p id="code">ここに説明が出ます</p>
<ul><li><a href="javascript:Code(0)">TOP</a></li>
  <li><a href="javascript:Code(1)">ABOUT</a></li>
  <li><a href="javascript:Code(2)">PHOTO</a></li>
  <li><a href="javascript:Code(3)">LINK</a></li>
</ul>

var txt = new Array();
txt[0]="トップページ";
txt[1]="このサイトについて";
txt[2]="ギャラリー";
txt[3]="リンク";

function Code($id) {
	var area =document.getElementById('code');
	area.innerHTML = txt[$id];
}

onloadイベントは直接書いても良い。