ブラウザでボタンを押すと変数を書き換えて、ほかの関数を動かしたい。

前提・実現したいこと

ブラウザのstartボタンを押すと変数speの値を１に変えて、ある関数を動かしたい
またブラウザのstopボタンを押すと変数speの値を0に変えて、ある関数の動きを止めたい。

このようなことを実現したいのですがどの書き方がまずいのかがわかりません。
どこを書き換えればよいのでしょうか？

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

if(spe == 1)で関数を動かしたいのだが、動かない。

該当のソースコード

一部のソースコードです。

html
1    <div class="contents margin">
2        <button id="start" class="button">開始ボタン</button>
3        <button id="fin" class="button">終了ボタン</button>
4    </div>
5
6<script>
7
8//推測用の変数
9var spe = 0;
10//スタートボタン
11document.getElementById('start').addEventListener('click', function() {
12    spe = 1;
13    console.log(spe);
14});
15
16//終了ボタン
17document.getElementById('fin').addEventListener('click', function() {
18    spe = 0;
19    console.log(spe);
20});
21
22
23//3秒おきにarrを表示する関数
24if(spe == 1 ){
25  $(function(){
26    setInterval(function(){
27     console.table(arr);
28    },3000);
29  });
30}
31
32</script>

試したこと

スタートボタンを押すとconsole.log(spe)；で１が表示され、終了ボタンを押すと０がコンソールに表示されることは確認しました。
しかしスタートボタンを押してspeが１になっているはずが、
arrがコンソールに表示されません

また最初から定義で
var spe = 1;とすると
arrがコンソールに3秒おきに表示されます。
が終了ボタンでspe =0 としても関数が回り続け3秒おきにarrが出力されてしまいます。

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

回答2件

ベストアンサー

処理的には

html
1<script>
2
3//推測用の変数
4var spe = 0;
5//3秒おきにarrを表示する関数
6if(spe == 1 ){
7  $(function(){
8    setInterval(function(){
9     console.table(arr);
10    },3000);
11  });
12}
13//スタートボタン
14document.getElementById('start').addEventListener('click', function() {
15    spe = 1;
16    console.log(spe);
17});
18//終了ボタン
19document.getElementById('fin').addEventListener('click', function() {
20    spe = 0;
21    console.log(spe);
22});
23</script>

と同じになります。当然ながらspe = 0;だとif(spe == 1 )に一致しないのでsetIntervalの処理はしません。

こんな感じにやればいいのではというサンプル載せておきます

html
1<html>
2<head>
3<meta charset="UTF-8">
4</head>
5<body>
6    <div class="contents margin">
7        <button id="start" class="button">開始ボタン</button>
8        <button id="fin" class="button">終了ボタン</button>
9    </div>
10<script>
11var id = 0;
12var arr = [0, 1, 2]; // とりあえず適当
13//スタートボタン
14document.getElementById('start').addEventListener('click', function() {
15  if(id <= 0) {
16    id = setInterval(function(){
17     console.table(arr);
18    },3000);
19  }
20});
21
22//終了ボタン
23document.getElementById('fin').addEventListener('click', function() {
24  clearInterval(id);
25  id = 0;
26});
27
28</script>
29</body>
30</html>