質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

402閲覧

【javascript】変数を関数名に使うことはできますか?

K.Mu

総合スコア3

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/05/15 14:37

編集2020/05/15 14:52

前提・実現したいこと

各a要素にそれぞれの関数名を与え、各々で動作するプログラミングをしたいと考えています。
変数を使った関数名の表記は可能でしょうか?

例)
class = "0"のaにはfunction open_window0{...}
class = "1"のaにはfunction open_window1{...}
class = "2"のaにはfunction open_window2{...}
といった感じです。

該当のソースコード

HTML

1<a class ="0" onmouseover="open_window0">red</a> 2<a class ="1" onmouseover="open_window1">blue</a> 3<a class ="2" onmouseover="open_window2">green</a> 4 5・・・ 6<a class ="30" onmouseover="open_window30">black</a> 7

javascript

1 2 3 function 'open_window + i'(){ 4 var elements = document.getElementsByClassName(i); 5 ...と処理が続く 6 } 7 8

試したこと

現在、forを使って関数名を量産することを考えています。
上記の関数名の表記が間違っていることはわかるのですが、調べても表記方法がわかりませんでした。
javascript初心者で、的外れな質問があったら申し訳ありません。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gentaro

2020/05/15 14:41

> 現在、forを使って関数名を量産することを考えています。 初心者の方が似たような質問をするケースを何度か目にしたことがありますが、一体どんな理由でそんな事をしたいと思うんですか?
miyabi_takatsuk

2020/05/15 14:47

各要素のクリック時の処理を動的にしたいのでしょうけど、 メモリの無駄遣いと、だいたいにおいてメリットが何もないので、 関数は一個で、要素別に処理を分けた方がいいかと思いますが・・・。
hoshi-takanori

2020/05/15 14:50

「高階関数」というものを学べば幸せになれるかもしれません。が、その前に学ぶべきことがたくさんありそうですね。
K.Mu

2020/05/15 15:05

コメントありがとうございます。 勉強不足で申し訳ありません。デメリットが大きいのですね。 色な方向から別の方法を模索してみます。 結局、'open_window + i'のような感じで文字+変数の関数名を作ることは不可能なのでしょうか?
gentaro

2020/05/15 15:28

JavaScriptであればやりようは色々ありますが、そもそも関数は引数によって動作を分岐することができるので、全くもって意味が無いと思います。 他人の書いたコードをメンテするときにそんな事をやってたらキレるレベルで。
K.Mu

2020/05/15 15:48

至らない点多く申し訳ありません。 関数で動作を分けることばかり考えていました。 精進します。
guest

回答1

0

ベストアンサー

可能っちゃ可能です。
ただし、クラス名の先頭に数字は文法違反です。
(idは可能。だが、スタイルは当てれない)
CSSでのセレクタ指定などに、悪影響があります。

html

1<!-- この書き方だと、関数名のあとに、()を付けないと発動しません。 --> 2<a class="obj0" onmouseover="open_window0()">red</a> 3<a class="obj1" onmouseover="open_window1()">blue</a> 4<a class="obj2" onmouseover="open_window2()">green</a> 5 6・・・ 7<a class ="obj30" onmouseover="open_window30()">black</a>

javascript

1// ;にすべき箇所が、,になってたので修正 2for(let i=0; i<31; i++){ 3 window['open_window' + i] = function() { 4 var elements = document.getElementsByClassName('obj' + i); 5 // ...と処理が続く 6 }; 7}

他にも、関数名自体を文字列で動的に定義する方法はいくつかあります。

ただし、ぶっちゃけいろいろと無駄です

なので、要素別に処理わけたいなら、下記のように、
関数自体は一個にして、呼び出した要素から処理を分けましょう。

html

1<!-- classは一意の物には向かない。複数同じ形式のものを用意するのに向いている --> 2<!-- よって、一意の要素を定義するにはidを使用する(JSの処理のみと、一意で有る限り数値を使用可能) --> 3<a id="0" class="obj" onmouseover="open_window(this)">red</a> 4<a id="1" class="obj" onmouseover="open_window(this)">blue</a> 5<a id="2" class="obj" onmouseover="open_window(this)">green</a> 6 7・・・ 8<a id="30" class="obj" onmouseover="open_window(this)">black</a>

javascript

1function open_window(elm) { 2 const i = Number(elm.id); 3 // というか、elmにオンマウスした要素が入っているので、下記で変数定義の必要なし 4 // var elements = document.getElementsByClassName('obj' + i); 5 // ...と処理が続く 6}

投稿2020/05/15 15:20

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

K.Mu

2020/05/15 15:46

手取り足取りご説明していただきありがとうございます。 漠然としたモヤモヤが晴れました。 最後にご提案いただいた方向で考えていこうと思います。 本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問