Refaktoryzacja Kodu

Hej,

Próbuje zrefaktoryzować kod w JS ale coś mi nie wychodzi

Kod początkowy:

var a0 = document.getElementById('a0');
var a1 = document.getElementById(a1');
var a2 = document.getElementById('a2');
....
....
....
....itd

a0.addEventListener("click", function() { dupaFun(0); });
a1.addEventListener("click", function() { dupaFun(1); });
a2.addEventListener("click", function() { dupaFun(2); });
...
...
...
...itd

Moja próba:

for (i=0; i<=iloscDup; i++)
{
	var a+i = document.getElementById('a'+i);
	a+i.addEventListener("click", function() { dupaFun(i); });
}

a+i nie dziala co wydaje sie oczywiste. Czy jakies pomysly jak to ugryźć?

Niech to Twoje "a" będzie o prostu tablicą tych elementów - chociaż akurat w tym przykładzie to nie potrzeba nawet tej tablicy - możesz po prostu w pętli pobierać elementy i od razu do nich dodawać listener'a (nie przypisując do zmiennych).

Krok pierwszy - poczytaj o tablicach i atrybucie data - dzięki temu stworzysz działające, choć nieoptymalne w tym przypadku rozwiązanie.
Krok drugi - poczytaj o event bubbling - dzięki temu załatwisz to elegancko bez pętli (plus za darmo dostaniesz możliwość dynamicznego dodawania elementów)

Ad. krok 1 - rozwiązanie z pętlą for:

<button data-type="a" data-value="1">Click me!</button>
<button data-type="a" data-value="2">Click me!</button>
<button data-type="a" data-value="3">Click me!</button>

const buttons = document.querySelectorAll('[data-type=a]')

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', (event) => {
    console.log(event.target.dataset.value)
  })
}

CodePen: https://codepen.io/caderek/pen/GxvNyZ?editors=1011

Ten sam koncept tylko z użyciem trochę elegantszego podejścia (metody tablic, destructuring i spread operator):

[...document.querySelectorAll('[data-type=a]')]
  .forEach(button => button.addEventListener('click', ({ target }) => {
    console.log(target.dataset.value)
  }))

CodePen: https://codepen.io/caderek/pen/xWLRjN?editors=1011

Ad. krok 2 - wykorzystanie bubblingu:

<div id="container">
  <button data-type="a" data-value="1">Click me!</button>
  <button data-type="a" data-value="2">Click me!</button>
  <button data-type="a" data-value="3">Click me!</button>
</div>

document
  .getElementById('container')
  .addEventListener('click', ({ target }) => {
    if (target.dataset.type === 'a') {
      console.log(target.dataset.value)
    }
  })

CodePen: https://codepen.io/caderek/pen/YaxpOy?editors=1011

PS
Możesz też jak sugeruje @sintloer pobierać elementy w pętli, coś w stylu:

<button id="a1">Click me!</button>
<button id="a2">Click me!</button>
<button id="a3">Click me!</button>

for (let i = 1; i <= 3; i++) {
  document
    .getElementById(`a${i}`)
    .addEventListener('click', () => {
      console.log(i)
    })
}

CodePen: https://codepen.io/caderek/pen/LdjbqE?editors=1011

ale mocno odradzam takie rozwiązanie, już nawet pomijając to że petla jest niepotrzebna (bubbling), to wiążesz w taki sposób bardzo silnie kod js i html - co jest bardzo złą praktyką (co jeśli będziesz chciał zmienić numery albo zmienić kolejność elementów na stronie?)