clearInterval　止まらない

画像を交互に切り替えてボタンを押した時に画像が止まるようにしたいのですが、clearIntervalがうまく動作しません。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <!-jQueryのCDN->
5 どっち？？
6  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
7  
8</head>
9<body>
10  
11  <p></p>
12  <div class='image-wrapper1' style="width: 100%; height:400px;">
13  <div class='imageArea'  style="width:100%; max-width:600px; margin:0 auto;">
14  <img src="画像のパス" 
15  style="display:none; position:absolute;"id='img1'>
16  <img src="画像のパス”
17  style="display:none;position: absolute;"id='img2'>
18  </div>
19  </div>
20
21  <button id="start"> スタート</button>
22  <button id="stop">ストップ</button>
23
24  
25
26  <script type="text/javascript" src="Game.js">
27  </script>
28
29</body>
30</html>
31

Javascript
1const start = document.getElementById('start');
2const stop= document.getElementById('stop');
3
4
5
6
7
8function adding(){ $('.imageArea img:first').addClass('active').show();}
9var changeImg = function(){
10    var $active = $('.imageArea img.active');
11    var $next = $active.next('img').length?$active.next('img'):$('.imageArea img:first');
12    $active.fadeOut(100).removeClass('active');
13    $next.fadeIn(100).addClass('active');
14  }
15
16  
17start.addEventListener('click',() =>{
18  adding();
19  setInterval(changeImg,100);
20 });
21
22stop.addEventListener('click',() =>{
23  clearInterval(changeImg);
24});

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

回答1件

ベストアンサー

clearInterval()に渡すのは関数ではなく、setInterval()の戻り値です。

javascript
1let timerID;
2start.addEventListener('click', () => {
3  adding();
4  timerID = setInterval(changeImg, 100);
5});
6
7stop.addEventListener('click', () => {
8  clearInterval(timerID);
9});