addEventListenerを使って、クリックされた時に他のボタンを無効にしたい。

Question

前提・実現したいこと

GAS初心者です。
https://qiita.com/Suibari_cha/items/87503c55d984ff0f43e6
こちらを参考にして、クイズを作り、さらに正解不正解のカウントをしたいと思っております。
removeEventListenerを使ってみたのですが、not defindとなってしまいます。

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

// 正解ボタンを押した時
Uncaught ReferenceError: goBatsu is not defined
    at HTMLButtonElement.goMaru

// 不正解ボタンを押した時
Uncaught ReferenceError: goMaru is not defined
    at HTMLButtonElement.goBatsu

removeEventListenerは未定義のものは無視して次が実行されると理解していたのですが、間違っているのでしょうか。

該当のソースコード

maru, batsuはそれぞれ正解・不正解のボタンです。
toiRowをGASから受け取って、countMaru、countaBatsuに渡したいため、addEventListenerを使っています。

     maru.addEventListener('click',function goMaru(){
      console.log("goMaru実行");
      maru.removeEventListener('click',goMaru);
      batsu.removeEventListener('click',goBatsu); 
      countMaru(toiRow);});

     batsu.addEventListener('click',function goBatsu(){
      console.log("goBatsu実行");
      maru.removeEventListener('click',goMaru);
      batsu.removeEventListener('click',goBatsu);  
      countBatsu(toiRow);});  

試したこと

countMaru、countBatsuそれぞれの関数内にremoveEventHandlerを入れる方法も取ってみましたが、同じようにgoBatsu,goMaruが未定義だと返されました。
{once:true}も使ってみましたが、自身でない方のボタンが生き残ってしまうため、正解→正解→不正解とすると、これまで正解していたところも不正解カウントされてしまいます。

説明が拙くてすみません。必要な情報がなければご指摘ください。

Comments

[m.ts10806]

タグ追加してください。
https://teratail.com/tags/Google+Apps+Script

[marimo_shi]

すみません、見落としておりました。ご指摘ありがとうございます。
追加いたしました。

Answer 1

たとえば、これはエラーになります。

const x = function f(){}
x() // エラーにならない
f() // エラーになる

名前付き関数式の名前は、その関数内でのみ使えます。

関数名。省略可能で、その場合は関数は無名になります。 name は関数本体のみのローカルです。

関数式 - JavaScript | MDN

Comments

[marimo_shi]

ありがとうございます。
ご提示のコードは、名前付き関数をオブジェクトとして定義し実行する分には問題ないが、名前付き関数そのままその関数の外から実行することはできないという理解で合っているでしょうか？

[Lhankor_Mhy]

ご認識の通りです。
ですので、

maru.addEventListener('click', goMaru = function goMaru(){ ... })

のように代入してしまえば、とりあえずエラーは出ないだろうと思います。

[marimo_shi]

なるほど、ありがとうございます。試してみます。

Answer 2

掲示されたソースコードでは、maru.addEventListener の引数の中で goMaru という関数を宣言していますね。

goMaru は maru.addEventListener の第2引数の中だけで参照することはできます。
しかし、それよりも外側のスコープでは参照できません。
同様に goBatsu も batsu.addEventListener の第2引数よりも外側のスコープでは参照できません。

ですから ReferenceError が発生しています。

スコープやエラーについて詳しく知りたい場合は、下記を参照してください。
関数とスコープ
ReferenceError: "x" is not defined

解決策

関数を addEventListener よりも外側のスコープで宣言して goMaru や goBatsu にアクセスできるようにしましょう。

<button id="maru">maru</button>
<button id="batsu">batsu</button>

const maru = document.getElementById('maru');
const batsu = document.getElementById('batsu');

function goMaru() {
    console.log("goMaru実行");
}

function goBatsu() {
    console.log("goBatsu実行");
}

function removeEvents(){
    maru.removeEventListener('click', goMaru);
    batsu.removeEventListener('click', goBatsu);
}

maru.addEventListener('click', goMaru);
batsu.addEventListener('click', goBatsu);

maru.addEventListener('click', removeEvents);
batsu.addEventListener('click', removeEvents);

Comments

[BluOxy]

アクセスできないスコープは addEventListener の第2引数より外 ではなく、Lhankor_Mhy さんの回答の通り、名前付き関数よりも外 が正しいですね。

[marimo_shi]

ご回答ありがとうございます。確かにスコープの問題ですね…初歩の初歩で躓いていました。

解決策の提示もありがとうございます。
なるほど、removeEventListenerも別の関数として作成して、同じボタンに紐づけるという方法があるのですね。
重ね重ねの質問で恐縮ですが、このやり方でgoMaru等に引数(toiRow)を渡したい場合は、
maru.addEventListener('click', goMaru(toiRow));
で良いのでしょうか？
そもそも、このやり方が無理なのかと思い、本来の目的であるcountMaruと別でgoMaruを定義しておりましたが、これが可能であれば、goMaruを経由せずに直接countMaruに行くことも可能でしょうか？

[BluOxy]

maru.addEventListener('click', goMaru(toiRow)); という書き方ではイベント登録時に goMaru が実行されるので問題を解決できないと思います。

function clickEvent(){
goMaru(toiRow);
}
のような関数を外のスコープで宣言して maru.addEventListener('click', clickEvent); と書くのは1つの手です。

toiRow がどう初期化されているかによっては別の手段も出てくるかもしれません。

[BluOxy]

maru.addEventListener('click', goMaru);
と書いた場合は goMaru の引数 toiRow に Event に基づいたオブジェクトが渡されます。使えるならそれを利用するのも1つの手段です。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener#the_event_listener_callback

[marimo_shi]

ありがとうございます。

toiRowはこの文の入っているfunction openAnswerに引数として渡されてきたものです。（一連の流れにおいて、初めの方で宣言したtoiRowを最後の方で使いたいため、リレーのバトン状態になっています）なので、おそらく前者の方法は使えないと思います。

後者の方を参考に試してみます。

[BluOxy]

> 初めの方で宣言したtoiRowを最後の方で使いたい
前者の方法に関して、下記ソースコードで goMaru(3) がクリックイベントにセットされる感じですが、これは求めていない動作ということでしょうか。

function goMaru(row)(
console.log("called goMaru with " + row);
}

function openAnswer(row) {
function clickEvent() {
goMaru(row);
}
maru.addEventListener('click', clickEvent);
// clickEvent を宣言する代わりに下記でも良い
// maru.addEventListener('click', () => goMaru(row));
}

const toiRow = 3;
openAnswer(toiRow);

もし上記が求めていない動作ならば、クリックされたときにどんな数値が渡されるのが正しいのでしょうか。

[BluOxy]

とここまで書いておいて気が付きましたが、「addEventListenerを使って、クリックされた時に他のボタンを無効にしたい。」という件についてはどなたかの回答で解決されていると思うので、解決した回答にまずはベストアンサーを選択し、新たな質問は別途作成しませんか。
（このままだとタイトルと会話の内容が乖離してしまい、情報の錯綜を招き、この質問を見る人は困ると思います）

新たな質問については少なくとも openAsnwer に渡された toiRow がどうクリックイベントに渡らないといけないのかがこちらに伝わらないと回答が難しいです。

[marimo_shi]

お返事が遅くなりすみません。初めての質問で、タイトルの付け方が下手だったようです。
おっしゃる通り、具体的にして、新しい質問として立てさせていただこうと思います。
ご教示いただきありがとうございました。

Answer 3

他の回答に書いてあるとおりスコープの問題ですのでスコープを直せば動くようになると思います。

ですが、HTMLのアプリケーションでは動的にイベントリスナを外すことはあまり行われません。この場合だと、maru.removeEventLisetner() を呼ぶよりは maru.disabled = true などとしてボタンを無効化したほうがコードもシンプルですし、ユーザにもわかりやすくなると思います。

Comments

[marimo_shi]

ご回答ありがとうございます。
removeEventListenerの代わりにdisabledを使ってみました。ボタンが必要なところで、disabled = "false"にしたのですが、テストしたところボタンが押せない状態になってしまいました。これについてはaddEventListenerの発火前なので、disabled = "true"のせいではないと思うのですが、自分では原因がわからなかったので、こちらの方法でももう少し調べてみます。

[int32_t]

もし 文字通り disabled = "false" と書いてると、true を代入していることになりますね。disabled プロパティに代入するのは false か true です。文字列 "false" "true" ではありません。

[marimo_shi]

ご指摘の通り、その前で代入していたため間違えて括ってしまいました。

ボタンは使えるようになったのですが、おそらく一時的にボタンが不活性化されるだけで、その後活性化した際にやはり前に設定されたaddEventListenerが反応してしまっているようです。（二重に実行される）
今回はremoveEventListenerを使って進めてみたいと思いますが、他に良い方法をご存知でしたらご教示くださると幸いです。

[int32_t]

もちろん、addEventListener()は1つのボタンに対して1回だけ実行するように変更すればよいですよ。
removeEventListener() を使う方針はお勧めしません。

[marimo_shi]

お返事が遅くなってすみません。
1回だけ実行するように、というのはonceのことでしょうか？
maruを押すとcountMaruを実行、batsuを押すとcountBatsuを実行のどちらかをしたくて、それを繰り返すものだったため、once = trueにしても、もう片方は未実行のまま残ってしまいます。
上手く質問の意図を伝えられずすみませんでした。もう少し具体的にして、新しい質問を立てさせていただきます。また、HTMLではできるだけdisabledを使うことを念頭に置いておきます。ありがとうございました。

[int32_t]

いえ、once の話ではなく、addEventListener()の呼び出し回数の話です。

Answer 4

goMaruやgoBatsuが未定義だと怒られているのですから、きちんと定義すれば良いのでは？

function goMaru(){
// 内容省略
}

function goBatsu(){
// 内容省略
}

     maru.addEventListener('click', goMaru);
     batsu.addEventListener('click', goBatsu);

Comments

[marimo_shi]

ご回答ありがとうございます。
addEventListenerの中では定義できていないということでしょうか。

書いてくださったように、toiRowを引数に入れて別で定義し直したところ、正解ボタンを押すとgoMaruが延々と続くようになってしまいました。
そこで、引数のための()をつけているせいかと思い、removeの方のみ()を外したところ、countMaruを実行→countBatsuを実行と続けて両方実行されてしまいました。
元のfunction内では
　　addEventListener('click', goMaru(toiRow));
　　addEventListener('click', goBatsu(toiRow));
としているのですが、やはりこの(toiRow)のせいでしょうか。だとすれば、引数を渡したい場合はどうすれば良いのでしょうか？