<!DOCTYPE html>
<html lang="ja">
<head>
<title>fetch</title>
</head>
<body>
<h1>fetch</h1>
<p>ファイルを選んでね:
<select id="file">
<option>aaa.txt</option>
<option>iii.txt</option>
<option>uuu.txt</option>
<option><a href="https://umap.openstreetmap.fr/ja/">umap</a></option>
</select>
</p>
<p><button type="button" id="load">読め!</button></p>
<pre id="pre"> これがおきかわる </pre>
<script type="text/javascript">
var file = document.getElementById("file"),
load = document.getElementById("load"),
pre = document.getElementById("pre");
load.addEventListener("click", (e) => {
fetch(file.value).then((resp) => { // file.valueでselectの値を得てそれをGET
console.log(resp.ok);
return resp.text(); // HTTPレスポンスから文字列を抜き出して返す
}).then((txt) => { // それを txt として受け取る
pre.textContent = txt; // pre要素の内容をそれに置き換える
});
if fetch(file.uuu.txt).then
return そんなファイルありません
});
</script>
</body>
</html>
歌岡大祐