<!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> </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要素の内容をそれに置き換える }); }); // --> </script> </body> </html>