20140223【JS】状況に応じて出力するファイルを変える
お題
状況に応じて出力するファイルを変える
プログラム概要
ファイル名を2つ画面に表示させマウスポインタがあたると非同期でファイルを取得し、
内容をtextareに表示させる
ソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>hoge</title>
</head>
<body>
<span id="s1" onmouseover="func(this);">a.txt</span><br>
<span id="s2" onmouseover="func(this);">b.txt</span><br>
<textarea id ="ta" rows="5" cols="30">ファイル名にマウスポインタが当たるとここにテキストの内容が表示されます</textarea>
<script>
function func(element) {
var request = new window.XMLHttpRequest();
request.onreadystatechange = function() { // コールバックメソッドを登録
if (request.readyState == 4 && request.status == 200) {
document.getElementById("ta").innerText = request.responseText;
}
};
request.open('GET', element.innerHTML, true); // 非同期のGETリクエスト
request.send(null);
}
</script>
</body>
</html>
実行結果
実行前：
b.txtにマウスポインタをあてると...
