【JavaScript】複数のボタンに設定する効率の良い関数の書き方

JavaScriptでの関数定義がうまくできず困っております。

下記URLのように複数のボタンがあり、それぞれのボタンを押した時に、同じような関数を実行させてたいと思っています。

JSFiddle
https://jsfiddle.net/ztqzhorz/1/

[やりたい事]
一番左上のボタンを押した時は"HELLO-01"というアラートを出す
その隣のボタンを押した時は"HELLO-02"というアラートを出す
その隣のボタンを押した時は"HELLO-03"というアラートを出す
・・・省略・・・
というように、1つの関数で複数のボタンのアラートを出したいです。
ここで言うとHELLO-16までアラートを出したいです。

[現状]
16個のボタンがあり、16個の関数を書いているような感じです。

もっとうまく書けるようになりたいなぁと思うのですが、
なかなかイメージできません。こういう場合は、どのように
記述すべきか教えていただけると嬉しいです。

HTML
1<html>
2<head>
3<style type="text/css">
4
5body{background-color:gray;}
6#CNT{background-color: black; padding: 35px; border-radius:20px; width:625px; height:648px; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; text-align:center; }
7.AUDIOZ_a001{width:455px; height:150px; color:white; display: table;}
8.a1{padding:3px; background-color: black; width:150px; height:150px; display: table-cell;}
9
10.BTN01{background-color:#6E6E6E; border-radius:10px; width:150px; height:150px;  color:white;  }
11.BTN01:hover{background-color:red; color:white; text-decoration:underline;}
12#MIXING_ZONE{background-color: black; border-radius:20px; width:625px; height:150px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; text-align:center; }
13
14</style>
15
16
17</head>
18
19<body>
20
21
22<div id="CNT">
23
24<!-- A -->
25<div class="AUDIOZ_a001">
26
27    <div class="a1">
28
29        <div class="BTN01" id="0" onClick="GEN();"></div>
30
31    </div>
32
33    <div class="a1">
34            
35            <div class="BTN01" id="1" onClick="GEN();"></div>
36            
37    </div>
38
39    <div class="a1">
40            
41            <div class="BTN01" id="2" onClick="GEN();"></div>
42            
43    </div>
44
45    <div class="a1">
46            
47            <div class="BTN01" id="3" onClick="GEN();"></div>
48            
49    </div>
50
51</div>
52
53<!-- B -->
54<div class="AUDIOZ_a001">
55
56    <div class="a1">
57
58        <div class="BTN01" id="4" onClick="GEN();"></div>
59
60    </div>
61
62    <div class="a1">
63            
64            <div class="BTN01" id="5" onClick="GEN();"></div>
65            
66    </div>
67
68    <div class="a1">
69            
70            <div class="BTN01" id="6" onClick="GEN();"></div>
71            
72    </div>
73
74    <div class="a1">
75            
76            <div class="BTN01" id="7" onClick="GEN();"></div>
77            
78    </div>
79
80</div>
81
82<!-- C -->
83<div class="AUDIOZ_a001">
84
85    <div class="a1">
86
87        <div class="BTN01" id="8" onClick="GEN();"></div>
88
89    </div>
90
91    <div class="a1">
92            
93            <div class="BTN01" id="9" onClick="GEN();"></div>
94            
95    </div>
96
97    <div class="a1">
98            
99            <div class="BTN01" id="10" onClick="GEN();"></div>
100            
101    </div>
102
103    <div class="a1">
104            
105            <div class="BTN01" id="11" onClick="GEN();"></div>
106            
107    </div>
108
109</div>
110
111<!-- D -->
112<div class="AUDIOZ_a001">
113        
114        <div class="a1">
115    
116            <div class="BTN01" id="12" onClick="GEN();"></div>
117    
118        </div>
119    
120        <div class="a1">
121                
122                <div class="BTN01" id="13" onClick="GEN();"></div>
123                
124        </div>
125    
126        <div class="a1">
127                
128                <div class="BTN01" id="14" onClick="GEN();"></div>
129                
130        </div>
131    
132        <div class="a1">
133                
134                <div class="BTN01" id="15" onClick="GEN();"></div>
135                
136        </div>
137        
138    </div>
139</div>
140
141
142</body>
143</html>

JavaScrit
1
2<script>
3
4        function GEN(){
5
6                alert("hello");
7
8        }
9
10</script>
11

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

回答3件

GEN関数に引数を付けてみてはどうでしょう？

js
1function GEN(num){
2    alert("hello-" + num);
3}

html
1<div onClick="GEN(1);"></div> <!--hello-1-->
2<div onClick="GEN(2);"></div> <!--hello-2-->

投稿2017/12/22 12:11

hota1024

総合スコア354

otokichi_

2017/12/23 07:13

ご回答ありがとうございます。自分には関数の基礎がわかってないのかもしれませんね。この方法をヒントに頑張ってみたいと思います。

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

こんな感じでしょうか？ MS Edge最新、IE11、Google Chrome最新、Firefox最新で確認しました。
ポイントは、マウスイベントを取得することでしょうか。

イベントリスナーを登録していなくてもデフォルトでマウスイベントは発生しているので、this.eventでイベントを取得できます。そして、this.event.targetで元の要素を取得することができます。

js
1function GEN(){
2    // 押されたBOXのIDを取得
3    var currentId = parseInt(this.event.target.id) + 1;
4
5    // IDを2桁ゼロ付き数字にフォーマット
6    currentId = ('0'+ currentId).substr(-2);
7
8    alert('HELLO-'+ currentId);
9
10    // 1行で書く？
11    //alert('HELLO-'+ ('0'+ (parseInt(this.event.target.id) + 1)).substr(-2));
12}

投稿2017/12/23 08:46

Tomak

総合スコア1652

たとえばjQueryをつかってこう

javascript
1$(function(){
2  $('.BTN01').on('click',function(){
3    var idx=$('.BTN01').index(this);
4    alert('HELLO-'+('0'+(idx+1)).substr(-2));
5  });
6});