Tengo algunos botones HTML. Uno con la etiqueta "Siguiente", otro con la etiqueta "Atrás". Cada uno debe llamar a su función respectiva al hacer clic.

HTML

 <div class="buttons"> <button class="lastQuestion">Back</button> <button class="nextQuestion">Next</button> </div>

JS

 function nextQuestion() // not including full code inside function function lastQuestion() // not including full code inside function

Estoy iterando sobre los botones y escuchando los clics. Estoy llamando a la función dependiendo de su contenido de texto. Esto solo funciona cuando especifico const para cada iteración. Si no lo hago, ambos botones llaman a nextQuestion() . No he probado esto con let , pero me gustaría saber por qué este es el caso en JavaScript. Soy nuevo en JS específicamente.

Esto funciona:

 for (const btn of navButtons) { btn.addEventListener('click', () => { if (btn.textContent === 'Next') { nextQuestion(); } else { lastQuestion(); } }) }

Esto no lo hace:

 for (btn of navButtons) { btn.addEventListener('click', () => { if (btn.textContent === 'Next') { nextQuestion(); } else { lastQuestion(); } }) }