jsでスロットアプリを作りたい

#できないこと
ドットインストールのjsのスロットアプリを作りたいのですがボタンを押した時止める処理ができません。
datasetの部分が違うと思うのですけど...
clearTimeout(timers[this.dataset.index]);の部分を
clearTimeout(timers[panels[i].children[1].dataset.index]);にしたりしたんですけど
できません。

#コード

index.html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>My Slot</title>
6    <link rel="stylesheet" href="css/styles.css">
7  </head>
8  <body>
9    <div class="slot">
10      <div class="panel">
11        <img src="img/seven.png" width="90" height="110">
12        <div class="stop" data-index="0">STOP</div>
13      </div>
14      <div class="panel" >
15        <img src="img/seven.png" width="90" height="110">
16        <div class="stop" data-index="1">STOP</div>
17      </div>
18      <div class="panel">
19        <img src="img/seven.png" width="90" height="110">
20        <div class="stop" data-index="2">STOP</div>
21      </div>
22    </div>
23    <div id="spin">SPIN?</div>
24
25    <script src="js/main.js"></script>
26  </body>
27</html>
28

main.js
1'use strict';
2
3  const panels = document.getElementsByClassName('panel');
4  const spin = document.getElementById('spin');
5
6  const cards = [
7    'seven.png',
8    'bell.png',
9    'cherry.png',
10  ];
11
12  let timers = [];
13
14  function runSlot(n) {
15    timers[n] = setTimeout(() => {
16      panels[n].children[0].src =
17        'img/' +
18        cards[Math.floor(Math.random() * cards.length)];
19        runSlot(n);
20    }, 50);
21  }
22
23  function initPanel() {
24    let i;
25    for(i = 0; i < panels.length; i++) {
26      panels[i].children[1].addEventListener('click',() => {
27
28　　　　//この部分がおかしいと思う⬇️
29       clearTimeout(timers[this.dataset.index]);
30      });
31    }
32  }
33
34initPanel();
35
36
37  spin.addEventListener('click', () => {
38    let i;
39    for(i = 0; i < panels.length; i++) {
40      runSlot(i);
41    }
42  });

#エラー

#環境

Chrome バージョン: 72.0.3626.121

よろしくお願いします

#やったこと
#####1
console.log(this);をしたところundefinedでした。

#####2

for(i = 0; i < panels.length; i++) {
      panels[i].children[1].addEventListener('click',function(){
        console.log(this);
        clearTimeout(timers[this.dataset.index]);
   });
}

フロー関数でしなかったらできました。フロー関数だとthisが定義されない。

#####3

for(i = 0; i < panels.length; i++) {
      panels[i].children[1].addEventListener('click',(e) =>{
        console.log(e.target);
        clearTimeout(timers[e.target.dataset.index]);
      });
    }

フロー関数の場合だとEvent.targetを使う。

m.ts10806

2019/03/13 07:42

console.log()でthisを出力してみた結果を質問に追記してください。

date

2019/03/13 08:50

その問題の部分プレミアムの人しかできないのでソースコードを見ることができるはず　ソースコードにも質問のように書かれているのでしょうか?

lassieena

2019/03/13 08:53

thisはundefinedでした。ソースコードはvarとかアロー関数とか少し古かったので変更しました。アロー関数じゃないやり方だとできます。

lassieena

2019/03/13 09:08

できました

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

回答2件

んじゃあ、これでどうでしょうか

<!DOCTYPE html>
<html lang="ja" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>My Slot</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="slot">
    <div class="panel">
      <img src="img/seven.png" width="90" height="110">
      <div class="stop" data-index="0">STOP</div>
    </div>
    <div class="panel">
      <img src="img/seven.png" width="90" height="110">
      <div class="stop" data-index="1">STOP</div>
    </div>
    <div class="panel">
      <img src="img/seven.png" width="90" height="110">
      <div class="stop" data-index="2">STOP</div>
    </div>
  </div>
  <div id="spin">SPIN?</div>

  <script>
    'use strict';
    const panels = document.getElementsByClassName('panel');
    const spin = document.getElementById('spin');
    const cards = [
      'seven.png',
      'bell.png',
      'cherry.png',
    ];
    let timers = [];

    function runSlot(n) {
      timers[n] = setTimeout(() => {
        panels[n].children[0].src =
          'img/' +
          cards[Math.floor(Math.random() * cards.length)];
        runSlot(n);
      }, 50);
    }

    function initPanel() {
      let i;
      for (i = 0; i < panels.length; i++) {
        panels[i].children[1].addEventListener('click', (e) => {
          console.log(e.target);
          clearTimeout(timers[e.target.dataset.index]);
        });
      }
    }
    initPanel();
    spin.addEventListener('click', () => {
      let i;
      for (i = 0; i < panels.length; i++) {
        runSlot(i);
      }
    });
  </script>
</body>

</html>

投稿2019/03/13 07:47