

コールバック関数に関数funcdogを指定する際、dogの箇所をhtml要素buttonのid名を利用して指定したいです。こうした処理は実現可能ですか？
実現可能ならば、どのような方法が考えられますか？ 関数名の型がもし文字列ならば、次のようなことがしたいということです。

[code]

    const button = document.querySelector('button');
    button.addEventListener('click', `func${button.id}()`); 
    //<button type="button" id='dog'>dog</button>
    
[/code]


CC BY-SA 4.0
2021-08-13T07:32:10.947
80771
2021-08-13T13:18:42.767
47702
question
javascript
html要素のid名をコールバック関数の関数名に使用したい


一般的には、筋が悪いやり方です。関数呼び出しの部分で関数の名前をプログラムの実行時に動的に変えていってしまった場合、その生成された関数名の関数が存在しないときのエラーを制御しにくくなりますし、また関数を定義する際にも関数の呼び出し関係が分かりづらくなってしまったりします。また、詳しくは書きませんが場合によってはプログラムの実行速度にも影響を与える可能性があります。

このようにする代わりに、まずは引数に渡される
[`Event`](https://developer.mozilla.org/ja/docs/Web/API/Event)
が持っている情報で処理できないか考えてください。たとえばコールバックが `function exampleFunction(event) { ... }`
みたく定義してあったとすると、関数内では `event.target.id` で呼び出し元の ID
が分かります。こうすると関数の処理の内部で妥当な値かチェックしてお好みのエラーを出したりもできるようになります。

※これ以上先をどのように処理するかは、なぜ質問者さんがこのようなことをしたくなったか次第です。`Event`
を使った上で更に困ったことがあれば、なぜ困ったかの文脈も含めて新しい質問として投稿してみてください。参考: [XY
問題](https://ja.meta.stackoverflow.com/q/2701/19110)


CC BY-SA 4.0
2021-08-13T13:18:42.767
80778
2021-08-13T13:18:42.767
19110
80771
answer