質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • JavaScript

    17461questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 307

kei0005

score 4

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

 前提・実現したいこと

<input type="button" onclick = "Life()" value="Start" style="widht:50px; height: 50px; font-size:20px;">で実装されているボタンをクリックすると関数Lifeを実行するようにしたいです。5つのボタンには乱数がそれぞれ割り当てられてはいるのですが、変数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


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

 該当のソースコード

<html>
  <head>
    <h1 id="t"></h1>
    <script type="text/javascript"> </script>

    <script>
      var time=5;

      var score=0;
      var click=0;
      var stopper=0;

      var r1=Math.floor(Math.random ( ) * 100)+1;
      var r2=Math.floor(Math.random ( ) * 100)+1;
      var r3=Math.floor(Math.random ( ) * 100)+1;
      var r4=Math.floor(Math.random ( ) * 100)+1;
      var r5=Math.floor(Math.random ( ) * 100)+1;

      document.g_switch.gs_1.value = r1;
      document.g_switch.gs_2.value = r2;
      document.g_switch.gs_3.value = r3;
      document.g_switch.gs_4.value = r4;
      document.g_switch.gs_5.value = r5;

      function Life(){ //この関数のif(time<=0)が実行されない
        //document.getElementById("t").innerHTML = (t:"time");
        stopper=0;
       time--;

        document.g_switch.gs_1.value = Math.floor(Math.random ( ) * 100)+1;
        document.g_switch.gs_2.value = Math.floor(Math.random ( ) * 100)+1;
        document.g_switch.gs_3.value = Math.floor(Math.random ( ) * 100)+1;
        document.g_switch.gs_4.value = Math.floor(Math.random ( ) * 100)+1;
        document.g_switch.gs_5.value = Math.floor(Math.random ( ) * 100)+1;

        if(time<=0){        //ここがうまく実行されない
          window.alert("aaa")
          document.write('最大数クリック回数:');
          document.write(click);
          document.write('取得ポイント:');
          document.write(score);
        }
      }
      setInterval(Life,1000); //おそらくこれも機能していない


      function point(x){ 

        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){
          click++;
          score+=x;
          stopper++;
        }else{
          score-=x;
          stopper++;
        }

      }


    </script>
    <form name = "g_switch">

      <input type="button" onclick = "Life()" value="Start" style="widht:50px; height: 50px; font-size:20px;">
      <input type="button" onclick = "point(document.g_switch.gs_1.value)"  name="gs_1" value="SW1" style="widht:50px; height: 50px; font-size:20px;">
      <input type="button" onclick = "point(document.g_switch.gs_2.value)"  name="gs_2" value="SW2" style="widht:50px; height: 50px; font-size:20px;">
      <input type="button" onclick = "point(document.g_switch.gs_3.value)"  name="gs_3" value="SW3" style="widht:50px; height: 50px; font-size:20px;">
      <input type="button" onclick = "point(document.g_switch.gs_4.value)"  name="gs_4" value="SW4" style="widht:50px; height: 50px; font-size:20px;">
      <input type="button" onclick = "point(document.g_switch.gs_5.value)"  name="gs_5" value="SW5" style="widht:50px; height: 50px; font-size:20px;">


    </form>
  </head>
</html>

 試したこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+2

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/17 20:40

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

    キャンセル

  • 2018/06/17 21:05

    横から失礼します。直接関係はないのですが、document.writeは後々不便になることもあるので、document.write()の代わりに、console.log())を使うことをお勧めします。(結果はページ上には表示されず、JSコンソール(windowsならCtr+Shift+J )に表示されます。)

    どうしてもページ上に表示させたいのであれば、createElementあたりを使うのをお勧めします
    https://developer.mozilla.org/ja/docs/Web/API/Document/createElement

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17461questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。