safariだけ変数が引き継げない

Safariでの　TypeError: undefined is not an object (evaluating

ハンバーガーメニュー作成中に下記のようなエラーがsafariで表示されました。
Chrome,firefoxではエラーなく動作していますがsafariだけ動作しません。
どうやら７行目のfunction btnclick()の関数内に変数iが渡っていないようなのですが、
その原因をご教授いただきたいです。

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

TypeError: undefined is not an object (evaluating 'arrow[i].classList')

該当のソースコード

var btn = document.getElementsByClassName('btn');
var arrow = document.getElementsByClassName('btn__arrow');
var detail = document.getElementsByClassName('detail');
var i;
for(let i = 0; i < btn.length; i++) {
btn[i].addEventListener('click',btnclick,false);
function btnclick(){
arrow[i].classList.toggle('is-active');
detail[i].classList.toggle('is-active');
}
}

Javascript

markey

2020/06/05 19:24

「７行目のfunction btnclick()の関数内に変数iが渡っていない」というのは何で判断しましたか？

m.ts10806

2020/06/05 21:11

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2020/06/05 21:12

あと、HTMLもご提示ください。再現確認ができません。 safariはWindowsですか？Macですか？

taammy

2020/06/06 03:36

to:markeyさん７行目"function btnclick(){"の直後の行に console.log(i);を入れて確認していました。 choromeだとクリック時に数値を返しくるのですが safariだとundifinedとなってしまいます。。。

taammy

2020/06/06 03:37

to:m.ts10806さん大変失礼いたしました。今回は解決したためクローズさせていただきますが、以後気をつけます。

行動規範の内容に同意します

回答1件

ベストアンサー

for の中で function つくるなら無名関数でいいのでは。

js
1for(let i = 0; i < btn.length; i++) {
2btn[i].addEventListener('click',function (){
3arrow[i].classList.toggle('is-active');
4detail[i].classList.toggle('is-active');
5},false);
6}