JavaScript:setIntervalで関数呼び出しをしても実行されない

初心者で現在JavaScriptの勉強をしているものです

前提・実現したいこと

<input type="button" onclick = "Life()" value="Start" style="widht:50px; height: 50px; font-size:20px;">で実装されているボタンをクリックすると関数Lifeを実行するようにしたいです。５つのボタンには乱数がそれぞれ割り当てられてはいるのですが、変数timeないしはsetInterval(Life,1000);がうまく動いてくれずに困っております。

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

Mozilla Thimbleというウェブ上でJavaScriptを書けるページで書いているのですが、

Uncaught TypeError: Cannot read property 'gs_1' of undefined
TypeError: Cannot read property 'gs_1' of undefined
at https://mozillathimblelivepreview.net/bramble/production/dist/vfs/.anonymous/projects/900bfa2a-d30d-4e6c-97f0-e5f6980865ee/index.html:1904:25

といったエラーが出てきます

該当のソースコード

Javascript
1<html>
2  <head>
3    <h1 id="t"></h1>
4    <script type="text/javascript"> </script>
5
6    <script>
7      var time=5;
8
9      var score=0;
10      var click=0;
11      var stopper=0;
12
13      var r1=Math.floor(Math.random ( ) * 100)+1;
14      var r2=Math.floor(Math.random ( ) * 100)+1;
15      var r3=Math.floor(Math.random ( ) * 100)+1;
16      var r4=Math.floor(Math.random ( ) * 100)+1;
17      var r5=Math.floor(Math.random ( ) * 100)+1;
18
19      document.g_switch.gs_1.value = r1;
20      document.g_switch.gs_2.value = r2;
21      document.g_switch.gs_3.value = r3;
22      document.g_switch.gs_4.value = r4;
23      document.g_switch.gs_5.value = r5;
24
25      function Life(){　//この関数のif(time<=0)が実行されない
26        //document.getElementById("t").innerHTML = (t:"time");
27        stopper=0;
28       time--;
29
30        document.g_switch.gs_1.value = Math.floor(Math.random ( ) * 100)+1;
31        document.g_switch.gs_2.value = Math.floor(Math.random ( ) * 100)+1;
32        document.g_switch.gs_3.value = Math.floor(Math.random ( ) * 100)+1;
33        document.g_switch.gs_4.value = Math.floor(Math.random ( ) * 100)+1;
34        document.g_switch.gs_5.value = Math.floor(Math.random ( ) * 100)+1;
35
36        if(time<=0){        //ここがうまく実行されない
37          window.alert("aaa")
38          document.write('最大数クリック回数：');
39          document.write(click);
40          document.write('取得ポイント：');
41          document.write(score);
42        }
43      }
44      setInterval(Life,1000);　//おそらくこれも機能していない
45
46
47      function point(x){　
48        
49        if(x>=document.g_switch.gs_1.value && x>=document.g_switch.gs_2.value && x>=document.g_switch.gs_3.value && x>=document.g_switch.gs_4.value && x>=document.g_switch.gs_5.value && stopper==0){
50          click++;
51          score+=x;
52          stopper++;
53        }else{
54          score-=x;
55          stopper++;
56        }
57       
58      }
59      
60
61    </script>
62    <form name = "g_switch">
63
64      <input type="button" onclick = "Life()" value="Start" style="widht:50px; height: 50px; font-size:20px;">
65      <input type="button" onclick = "point(document.g_switch.gs_1.value)"  name="gs_1" value="SW1" style="widht:50px; height: 50px; font-size:20px;">
66      <input type="button" onclick = "point(document.g_switch.gs_2.value)"  name="gs_2" value="SW2" style="widht:50px; height: 50px; font-size:20px;">
67      <input type="button" onclick = "point(document.g_switch.gs_3.value)"  name="gs_3" value="SW3" style="widht:50px; height: 50px; font-size:20px;">
68      <input type="button" onclick = "point(document.g_switch.gs_4.value)"  name="gs_4" value="SW4" style="widht:50px; height: 50px; font-size:20px;">
69      <input type="button" onclick = "point(document.g_switch.gs_5.value)"  name="gs_5" value="SW5" style="widht:50px; height: 50px; font-size:20px;">
70
71
72    </form>
73  </head>
74</html>
75
76

試したこと

windowsのメモ帳やBracketsなどでも書いて試してみましたが同じく関数が実行されませんでした
申し訳ありませんがどなたかご教授お願いしたいです

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

回答1件

何点か気になる箇所があります。

document.getElementById("t").innerHTML = (t:"time");は、文法的に成立していません。何を出力するか判別できないので修正案は省略しますが、適宜修正が必要です。
switchは予約語のため、関数名に使えません。別な名前にする必要があります。
setIntervalでの実行など、最初の読み込み時以外にdocument.writeを使おうとしてもうまく動きません。DOMに書き換える必要があります。

投稿2018/06/17 10:01

編集2018/06/17 10:03

maisumakun

総合スコア145183

kei0005

2018/06/17 11:40

早速の回答ありがとうございますご指摘いただいた点を中心にもう一度考えたところ、ある程度まではプログラムが動くようになりました。setIntervalがうまく機能していないようなのでそこを中心にもう少し考えてみたいと思います

moscow3

2018/06/17 12:05

横から失礼します。直接関係はないのですが、document.writeは後々不便になることもあるので、document.write()の代わりに、console.log())を使うことをお勧めします。（結果はページ上には表示されず、JSコンソール（windowsならCtr+Shift+J ）に表示されます。）どうしてもページ上に表示させたいのであれば、createElementあたりを使うのをお勧めします https://developer.mozilla.org/ja/docs/Web/API/Document/createElement

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