JavaScript 変数名　動的に付けたい

js
1
2<script>
3{
4
5
6for (var i = 41; i < 43; i++) {
7
8eval("var btn" + i + "=" +  document.getElementById('btn' + i) + ";");
9eval("var answer" + i + "=" +  document.getElementById('answer' + i) + ";");
10eval("var delete_answer" + i + "=" +  document.getElementById('delete' + i) + ";");
11  
12btn.addEventListener('click',()=>{
13
14
15answer_toggle(btn, answer);
16
17});
18
19delete_answer.addEventListener('click',()=>{
20
21answer_toggle(btn,answer);
22
23});
24}
25
26
27
28function answer_toggle(btn,answer) {
29 
30
31if(btn.classList.contains('hidden') === true){
32
33  btn.classList.remove('hidden');
34  answer.classList.add('hidden');
35
36  }else{
37
38  btn.classList.add('hidden');
39  answer.classList.remove('hidden');
40  
41}
42}
43

変数名を動的に付けたいのですが、うまくいきません。
調べたところ、eval（）で出来そうだったのですが、
Uncaught SyntaxError: Unexpected identifier
とエラーになってしまいます。
また、eval（）はあまり使わないほうが良いとも調べたら書いてありました。

動的に変数名を変える方法がなかなか分からなかったのでアドバイスいただけると助かります。

--追記----

やりたいことは、hmtlボタンに対して(複数のボタン)に対してイベントを仕込みたいと思っております。

動的な変数名ではなくて配列にしてみました。

js
1array_btn[i].addEventListener('click',()=>{
2
3
4//undefinedになってしまう
5console.log(array_btn[i]);
6answer_toggle(array_btn[i], array_answer[i]);
7
8});
9

しかし、上記のところで,array_btn[i]がundefinedになってしまいます。

これは、clickした時に、イベントが走るから、array_btn[i]は未定義になるのでしょうか？

js
1
2
3
4
5
6{
7
8var array_btn = [];
9var array_answer = [];
10var array_delete_answer = [];
11
12for (var i = 41; i < 43; i++) {
13
14
15array_btn.push( document.getElementById('btn' + i));
16array_answer.push( document.getElementById('answer' + i));
17array_delete_answer.push( document.getElementById('delete' + i));
18
19
20}
21
22
23for (var i = 0; i < array_btn.length; i++) {
24
25
26array_btn[i].addEventListener('click',()=>{
27
28
29//undefinedになってしまう
30console.log(array_btn[i]);
31answer_toggle(array_btn[i], array_answer[i]);
32
33});
34
35array_delete_answer[i].addEventListener('click',()=>{
36
37answer_toggle(array_btn[i],array_answer[i]);
38
39});
40
41}
42
43
44//受け取った領域の表示・非表示を変える
45function answer_toggle(btn,answer) {
46
47
48if(btn.classList.contains('hidden') === true){
49
50  btn.classList.remove('hidden');
51  answer.classList.add('hidden');
52
53  }else{
54
55  btn.classList.add('hidden');
56  answer.classList.remove('hidden');
57}
58}
59
60}
61