function init() { var number = 0; var csvtext; function prepare(n) { var tn = csvtext[n]; for (var id of ["text", "image"]) { document.getElementById(id).innerHTML = tn[id]; } document.getElementById("image").setAttribute("src", "image/" + tn.image); //document.getElementById("back_image").style.backgroundImage = tn.back_image; } function backP() { number = Math.max(0, number - 1); prepare(number); } function nextP() { number = Math.min(number + 1, csvtext.length - 1); prepare(number); } fetch("./text.csv"). then(function(resp) { return resp.text().then(function(text) { csvtext = new CSV(text, { header: true }).parse(); prepare(0); }); }); document.getElementById("backP").addEventListener("click", backP); document.getElementById("nextP").addEventListener("click", nextP); } window.onload = init;