0

練習でスタートボタンを押すと、3,2,1でじゃんけんが出るように書いたのですがエラーが出ます。Uncaught SyntaxError: missing ) after argument listがでていろいろ試したのですが解決しませんでした。根本的におかしなことをしているかもわかりませんがご教示お願いいたします。

<script>
             "use strict";

             var gyanken =["✊","✌","✋"];
             var i=3;
             document.getElementById("start").getElementById("moniter").addEventListener("click", function(){ function show(){
                       moniter.innerHTML=(i--);
                       var time = setTimeout(function() {
                         show();
                       }, 1000);
                       if(i<0){
                          clearTimeout(time);
                        //  start.addEventListener("click", function(){
                          var result = Math.floor(Math.random()*3);
                          moniter.innerHTML= gyanken[result];
                       }}}
                       show();)
</script>

1 件の回答 1

3

インデントをかけて整形すれば見やすくなってミスに気づくかもしれないです。

<script>
    "use strict";

    var gyanken =["✊","✌","✋"];
    var i=3;
    document.getElementById("start").getElementById("moniter").addEventListener(
        "click", 
        function(){
            function show(){
                moniter.innerHTML=(i--);
                var time = setTimeout(
                                        function() {show();}, 
                                        1000
                                    );
                if(i<0){
                    clearTimeout(time);
                    //  start.addEventListener("click", function(){
                    var result = Math.floor(Math.random()*3);
                    moniter.innerHTML= gyanken[result];
                }
            }
        }
        show();
    );
</script>

addEventListernerの引数がおかしいのに気づきましたでしょうか?
Uncaught SyntaxError:基本的のこのエラーは構文エラーの際に表示されます。
missing ) after argument list:引数リストの後ろに)閉じが無いって怒られてます

気になる点はありますが、とりあえずイベントに食わせている無名関数内で
関数宣言と実行を行えば動くのではないでしょうか?

document.getElementById("start").getElementById("moniter").addEventListener(
    "click", 
    function(){
        function show(){
            moniter.innerHTML=(i--);
            var time = setTimeout(
                                    function() {show();}, 
                                    1000
                                );
            if(i<0){
                clearTimeout(time);
                //  start.addEventListener("click", function(){
                var result = Math.floor(Math.random()*3);
                moniter.innerHTML= gyanken[result];
            }
        }
        show();
    }
);

動作するコードを追記しました。参考にしてください。

//グローバル変数
var gyanken =["✊","✌","✋"];
var sec=3;
var time = null;

//クリックイベントをバインド(onloadなど初期化関数に入れても良い)
document.getElementById("monitor").addEventListener(
    "click", 
    function(){
        //クリック時初期化
        sec=3;
        if(null!=time){ clearTimeout(time); }
        time=null;
        //表示開始
        show(); 
    }
);

/**
 * 表示処理関数
 */
function show(){
    //再起処理の最後にムダ処理するのでIFで切り分け
    if(0<=--sec){
        //表示更新
        monitor.innerHTML=sec+1;
        //1秒後再起
        time = setTimeout(
                              function() {show();}, 
                              1000
                          );
    }else{
        //タイマーが存在した場合、破棄
        if(null!=time){ clearTimeout(time); }
        //タイマー変数初期化
        time=null;

        //乱数生成
        var result = Math.floor(Math.random()*3);
        //結果表示
        monitor.innerHTML= gyanken[result];
    }
}
#monitor {
  background-color:#d0f0f0;
  width:180px;
  height:120px;
  cursor:pointer;
}
<div id="monitor"></div>

3
  • まだ、動くようにできていないのですが、(インデントをかけて整形)が重要なのはわかりました。ご教授ありがとうございます。継ぎはぎで書いたので、よく理解ができていませんでした。一から作り直してみます。
    – m k
    2017年3月28日 3:56
  • 追記しました。想定している動作はこんな感じでしょうか?、とりあえずコメントを書きまくったので参考にしてください。
    – user10259
    2017年3月28日 4:46
  • まさにやりたかったことです!丁寧に解説つけていただきありがとうございます。このような発想はできなかったので細かく分析していきたいと思います。
    – m k
    2017年3月28日 8:59

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。