Javascript (基本的なこと004)
基本的なこととして、javascriptのコンポーネントを試してみる。
Webでサンプルを探したら、ドロップダウンリストとボタンのサンプルがあったので、それを試してみた。データは少し変えたけど、ドロップダウンリストで指定した値でボタンをクリックすると、idとデータがテキストボックスに表示されるプログラムと、データを追加するプログラム。
まず起動。
ここで選択をクリックすると、下の部分のテキストボックスにidとデータが表示される。
全コードは、一番下につけるけど、上の動作では、ボタンのコンポーネントに対して下のコードを紐づけることで、ボタンがクリックされたときに起動されるようにしているよう。
function choice() {
var heritage = document.getElementById("heritage");
var value = heritage.value;
document.getElementById("value_area").innerHTML = value;
var label = heritage.options[heritage.options.selectedIndex].text;
document.getElementById("label_area").innerHTML = label;
}
データを追加するプログラムも同じように、追加ボタンに対してコードを紐づけて、ボタンがクリックされたときに起動するようにしている。
上の図では「百舌鳥・古市古墳群」がないが、追加ボタンを押した後（下図）では追加されている（データ多くしすぎて見にくくなってしまったけど）。
コンポーネントまで試したけど、基本的なことだけやっててもつまらないので、次回から本に書いてあったカレンダーのjavascriptを少しアレンジして作成してみようか。どんなものを作るか少し考える。
下が今回試した全コード。
<!DOCTYPE html>
<html>
<script>
function choice() {
var heritage = document.getElementById("heritage");
var value = heritage.value;
document.getElementById("value_area").innerHTML = value;
var label = heritage.options[heritage.options.selectedIndex].text;
document.getElementById("label_area").innerHTML = label;
}
// 追加
function add() {
var heritage = document.getElementById("heritage");
var option = document.createElement("option");
option.value = document.getElementById("new_value").value;
option.innerText = document.getElementById("new_label").value;
heritage.appendChild(option);
}
</script>
</head>
<body>
<select id="heritage">
<option value="JP01HT">法隆寺地域の仏教建造物</option>
<option value="JP02HC">姫路城</option>
<option value="JP03YK">屋久島</option>
<option value="JP04SS">白神山地</option>
<option value="JP05MA">古都京都の文化財</option>
<option value="JP06SG">白川郷・五箇山の合掌造り集落</option>
<option value="JP07GD">原爆ドーム</option>
<option value="JP08IS">厳島神社</option>
<option value="JP09MA">古都奈良の文化財</option>
<option value="JP10NS">日光の社寺</option>
<option value="JP11GS">琉球王国のグスク</option>
<option value="JP12KM">紀伊山地の霊場と参詣道</option>
<option value="JP13SR">知床</option>
<option value="JP14IG">石見銀山遺跡</option>
<option value="JP15OI">小笠原諸島</option>
<option value="JP16HM">平泉</option>
<option value="JP17FJ">富士山</option>
<option value="JP18TS">富岡製糸場</option>
<option value="JP19MI">明治日本の産業革命遺産</option>
<option value="JP20WA">国立西洋美術館</option>
<option value="JP21OI">宗像・沖ノ島</option>
<option value="JP22HC">潜伏キリシタン関連遺産</option>
</select>
<input type="button" value="選択" onclick="choice();"/>
<br />
<br />
<input id="new_value" type="text" value="JP23MK" />
<input id="new_label" type="text" value="百舌鳥・古市古墳群" />
<input type="button" value="追加" onclick="add();"/>
<br />
<br />
<div id="value_area"></div>
<div id="label_area"></div>
</body>
</html>