ハンバーガーメニューの作り方

ハンバーガーメニューを作ろうとしているんですがエラーが出て進めません。
文字の定義づけはしているのですがなぜかエラーが出てしまいます。

javascript
1$(function(){
2   $(".btn-gnavi").on("click",function({
3   //ハンガーが―メニューの位置を設定するための変数
4   var rightVal = 0;
5   if($(this).hasClass("open")) {
6      //「open」クラスを持つ要素はメニューを開いた状態に設定
7      rightVal = -300;
8      //メニューを開いたら次回クリック時は閉じた状態になるよう設定
9      $(this).removeClass("open");
10   else {
11      //「open」クラスを持たない要素はメニューを閉じた状態に設定(rughtValは0の状態)
12      //メニューを閉じたら次回クリック時は開いた状態になるよう設定
13      $(this).addClass("open");
14         }
15      
16      $("global-navi").stop().animate({
17         right: rightVal
18      }, 200);
19   });
20});

エラーメッセージはUncaught SyntaxError: Unexpected identifier　VM39:4
です。

よろしくお願いします。

1T2R3M4

2021/08/22 05:12

エラーが出た報告をしているだけに見えますが、何を”よろしくお願いします。”しているのですか。

Yuriika4

2021/08/22 05:14

すみません！このエラーを出ないようにしたいです！

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

回答1件

ベストアンサー

「文字の定義付け」とは何でしょうか？「変数の定義」のことでしょうか？
いずれにせよ今回はそこは関係なく、)と{の記載漏れが1箇所ずつあるのが原因です。

DIFF
1- $(".btn-gnavi").on("click", function({
2+ $(".btn-gnavi").on("click", function(){
3
4- else {
5+ } else {

余談

このミスで何故変数に言及したのかと思いましたが、VSCodeで見てみると確かにrightValにインテリセンスエラーが表示されました。
functionの引数の場所に{}を書いているのでrightvalの行がオブジェクトのプロパティと判断され、その文法に合致しないためエラーが表示されてそこが問題だと勘違いしたのでしょう。

プログラミング言語処理系は文法を書かれたままに正確に判断します。出ているエラーと実際の間違いが違うことは多々あります（間違いによって別の解釈がなされ、その解釈に則ったエラーがでる）
プログラミングでお金をもらいたいのなら、それっぽく書くのではなく構造を丁寧に把握しながら書くことをおすすめします。