JavaScript：二次元配列をボタンをクリックすると実行される関数で使いたい

Question

前提・実現したいこと

読みこんだcsvファイルを二次元配列にしそれを、クリックすると実行される関数でつかいたいです。

発生している問題・エラーメッセージ

グローバル変数をつかってみましたが、代入した関数内では二次元配列が表示されますが、関数外では「undefind」と表示されます。なぜそうなるのか教えていただきたいです。また、解決方法も教えていただきたいです。

###該当のソースコード

 <form name="myform">
    <input name="myfile" type="file" />
  </form>

var form=document.forms.myform;
let data;
form.myfile.addEventListner('change',function(e){
 var result=e.target.files[0];
 var reader=new FileReader();
 reader.readAsText(result);
 
 reader.addEventListner('load',makearray,false)
  function makearray(){
   //二次元配列にするための処理
　　data=//二次元配列;
   console.log(daat);//二次元配列が表示される
  }
})

console.log(data);//undefind
function //クリックすると画像を切り替える関数

Comments

[yambejp]

ソースが中途半端で判断がつきません
type=fileのname=myfileでcsvファイルを選びたいということでしょうか？
二次元配列とはどういうものを想定しているのでしょうか？
クリックすると実行される関数とはどういったもので、使いたいとはどうすることでしょうか？

[退会済みユーザー]

そうですね。編集します。

Answer 1

最大限好意的に解釈して以下のとおり。
csv化は簡易的に処理をしているのでもうすこし工夫が必要

<script>
window.addEventListener('DOMContentLoaded',()=>{
  let res;
  document.querySelector('#fl').addEventListener('change',e=>{
    const f=e.target.files[0];
    const fr=new FileReader();
    fr.readAsText(f);
    fr.addEventListener('load',e=>{
      res=e.target.result;
      res=res.replace(/^.+$/mg,'[$&]');
      res=res.replace(/[\r\n]+/g,',');
      res=`[${res}]`;
      res=JSON.parse(res);
    });
  });
  document.querySelector('#btn').addEventListener('click',e=>{
    console.log(res);  });
});

</script>
<input type="file" id="fl">
<input type="button" id="btn" value="btn">