(() => {
    var cafe = [],	// 読み取ったCSV全てが入る配列
	ncafe,		// データの個数(quiz.lengthのまま使ってもよい)
	pos=0;		// 現在の配列の添字位置
    var csvfile = "data.csv";	// CSVデータファイル名
    function putValues(row) {
	// CSVの1行分のJSONがrowに入る
	for (let key of Object.keys(row)) {
	    // Object.keys(JSON)でキーを1個ずつ取り出す(Rubyのkeys)
	    let id = "__" + key + "__"; // HTML要素のID
		console.log(id);
		console.log(row[key]);
	    let elem = document.getElementById(id);
	    if (elem) {  // もし id="__カラム名__" の要素が見つかったら
			if (elem.tagName.match(/img/i)) {
				elem.src=row[key];
			} else if (elem.tagName.match(/^a$/i)) { //^ はじめ $ 文末
				if (row[key]==""){
				elem.href=row[ないよ]
				} else {
				elem.href=row[key];
				}
			} else {
				elem.innerText = row[key];
			}
	    }
	}
    }
    
    function btn(n) {	// nで指定した数だけ現在位置(pos)をずらす
	pos = Math.floor(Math.random() * cafe.length);	// 0以上 ncafe以下 になるよう調整
	putValues(cafe[pos]);		// ずらした添字位置で文書書き換え
    }
 
	//ﾗﾝﾀﾞﾑにするのここからかく
  //  function btn() {
   //     let cafe2 = Math.floor(Math.random() * cafe.length);
    //}
   
    function init() {			// HTML文書を読み終わったら呼ばれる
	fetch(csvfile).			// csvfileをサーバから読み込んで
	    then((resp) => {		// 応答がrespに入るので
		if (resp.ok) return resp.text();	// テキストを返す
	    }).then((txt) => {		// テキストが txt に入るので
		cafe = new CSV(txt, {header: true}).parse(); // CSV解析
		ncafe = cafe.length;	// 行数を記憶
		putValues(cafe[pos]);	// 最初の行のデータを表示
	    });;
	document.getElementById("btn").addEventListener("click", btn);
	//document.getElementById("right").addEventListener("click", right);
    }
    document.addEventListener("DOMContentLoaded", ()=>{
	init();	// ブラウザの文書読み込みが完了したらここに来る
    }, false);
})();