jQuery 閉じカッコ、コロンセミコロンの付け方

Question

下記のコードについてなのですが、コードエラーが出てしまいます。
“Uncaught SyntaxError: Unexpected identifier”　このようなエラーが出ます。javascriptの記述に間違いがある場合に出るエラーかと思っているのですが、まずはコードチェッカーにてどういったエラーが出ているかを調べ$(#button)に、シングルクォートがないことに気づき、修正しました。
しかし依然としてエラーは出続けています。
修正できるポイントや、何かオススメのチェッカーなども、ご教授頂けますと幸いです。

$(function(){
    $("#button").on("click", function();{　
      var atai = $("input[type=text]").value();
      alert("atai");
    };
  });

Comments

[ex025]

> 何かオススメのチェッカーなど
テキストエディタは何を使っていますでしょうか。
プログラミングに用いられる多くのテキストエディタでは、自動的に構文をチェックして問題点を教えてくれます。
コードチェッカーに通すよりも、そちらの方が楽でしょう。
具体的なテキストエディタとしては、VSCodeやatomなどがあります。

[Junpeioasis]

ありがとうございます。当方エディタはatomを使用中のため、調べてみます。

Answer 1

;
が文末であること

関数定義は
function(){}
で一括りであること

関数呼び出しは
function(引数)　
であること

を意識されたら良いかと思います。

あとは適宜ドキュメントを参照。

---

「やりたいこと」を元に「どれが関数でどれが引数でどこが文末か」を意識できていれば、
今回のようなミスは防ぐことができます。
「上から順番に書く」のではなく「機能まとまりから書く」ことを意識。
つまり、「どこに関数を置いてその関数の何番目にどんな引数を置くか」をきちんと分解して考えられるようになる必要があります。

jQueryの基本系は「セレクタ」に対して「何かしらイベントや処理を呼び出す」です。
関数の呼び出しは 関数名()とう原則から
$()自体が関数であることになります。$()はjQuery()のエイリアス（別名、短縮形）。

あとはこの関数に引数を与えていくことで動作するわけです。

基本系を書く

$()

呼び出したいセレクタ

$("#button")

それに対する関数（関数の呼び出し結果に対して関数を呼び出す方式がとられています）

$("#button").on();

文末なので;もつけておく

on()関数の機能を確認
引数1つ目はイベント

$("#button").on('click');

今回は間のselectorやdataはないので、引数2つ目はhandler（function）

$("#button").on('click',function(){});

読みやすいように改行

$("#button").on('click',function(){

});

あとはhandler内に処理を書いていく

$("#button").on('click',function(){
  var atai = $("input[type=text]").value();
  alert("atai");
});

私も以前は下記を毎回どこかに控えておいてコピペしてましたが、

$(function(){
});

「機能で分解して理解する」ことを意識しだしてからは見なくても書けるようになりました（あとはやはりドキュメントのおかげか）

なので、「分解」という観点から、変数を利用してこんな感じにも書けることが分かると思います（未検証）

let btn = $("#button");
let clickFunc = function(){
  var atai = $("input[type=text]").value();
  alert("atai");
}
btn.on('click',clickFunc);

Answer 2

さしあたり2箇所修正すればコンパイルエラーはなくなります。

$(function(){
    $("#button").on("click", function(){　// ← ココ セミコロンをとる
      var atai = $("input[type=text]").value();
      alert("atai");
    }); // ← 閉じカッコを足す
  });

Answer 3

<script>
$(function(){
  $("#button").on("click", function(){
    var atai = $(":text").val();
    alert(atai);
  });
});
</script>
<input type="button" id="button" value="check">
<input type="text" value="123">