clearInterval 後　アニメーションを再開させたい　javascript

前提・実現したいこと

######分かるかた見えましたらご教授下さい
clearIntervalしたfunctionを再開させたい

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

Uncaught TypeError: interval is not a function

javascript /javatest.js

let stock = ['niku','susi','uni','stake']
const interval = setInterval(function(){
  stock.forEach(function(data,index){
    const idname = index;
    document.getElementById(idname).innerHTML = data;
  });
  const first = stock.shift();
  stock.push(first);
}, 200);

document.getElementById('stop').onclick = function(){
  clearInterval(interval);
}

document.getElementById('start').onclick = interval();

HTML

<!DOCTYPE html>

<main>
<div id = rensyuu>
  <div id = 0></div>
  <div id = 1></div> 
  <div id = 2></div>
  <div id = 3></div>
</div>
<p><button id = stop>止める</btn></p>
<p><button id = start>スタート</btn></p>

</main>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>

</head>
<body>
  <script src = "javatest.js"></script>
  <script>
  </script>
  

</body>
</html>

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

回答2件

ベストアンサー

間違いが多すぎるコードなのでほとんど書き直しました。
以下のコードを何度も見直して何が問題だったか調べてみてください。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5</head>
6<body>
7<main>
8  <div id="rensyuu">
9    <div id="0"></div>
10    <div id="1"></div>
11    <div id="2"></div>
12    <div id="3"></div>
13  </div>
14  <p><button id="start">スタート</button></p>
15  <p><button id="stop">ストップ</button></p>
16</main>
17<script>
18let timer;
19const stock = ['niku', 'susi', 'uni', 'stake'];
20const start = document.getElementById('start');
21const stop = document.getElementById('stop');
22
23start.addEventListener('click', function() {
24  timer = setInterval(function() {
25    stock.forEach(function(data, index) {
26      const idname = index;
27      document.getElementById(idname).innerHTML = data;
28    });
29    const first = stock.shift();
30    stock.push(first);
31  }, 200);
32});
33
34stop.addEventListener('click', function() {
35  clearInterval(timer);
36})
37</script>
38</body>
39</html>

投稿2019/07/13 05:45

編集2019/07/13 05:48

yasutomi

総合スコア2941

naoki10

2019/07/14 04:13

書き直して頂きありがとうございます！！見比べて勉強になりました。また間違っているかもしれないですが、ページ読み込み時に関数を起動させておきたかったので、下記のようにしました！質問本題外ですが、startを複数回連続でclickすると関数が重複しているのか、stop.addEventListenerで止まらなくなります。問題解決のためにどう調べればよいか分かりますか？ let timer; const stock = ['niku', 'susi', 'uni', 'stake']; let start = document.getElementById('start'); let stop = document.getElementById('stop') timer = setInterval(function(){ stock.forEach(function(data,index){ const idname = index; document.getElementById(idname).innerHTML = data; }); const first = stock.shift(); stock.push(first); }, 200) start.addEventListener('click',() => { timer = setInterval(function(){ stock.forEach(function(data,index){ const idname = index; document.getElementById(idname).innerHTML = data; }); const first = stock.shift(); stock.push(first); }, 200) }); stop.addEventListener('click',() =>{ clearInterval(timer); })

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