¿Alguien puede explicarme por qué la función no funciona cuando no hay argumentos entre paréntesis? Me refiero exactamente a "botón" y "e". Me parece que, dado que se escribe una función para cada elemento "btns", debería referirse automáticamente a él.
const btns = document.querySelectorAll('.question-btn'); btns.forEach(function(button){ button.addEventListener('click', function(e){ const question = e.currentTarget.parentElement.parentElement; question.classList.toggle('show-text'); }) });Si quiere decir que no entiende por qué necesita el button y e en las listas de parámetros y no puede simplemente tener:
const btns = document.querySelectorAll('.question-btn'); btns.forEach(function(/*no `button` here*/){ ???.addEventListener('click', function(/*no `e` here*/){ const question = ???.currentTarget.parentElement.parentElement; question.classList.toggle('show-text'); }) }); ...entonces la respuesta es ??? en lo anterior. El parámetro del button es cómo el código de devolución de llamada forEach puede referirse al botón específico que está siendo manejado por esa llamada a la devolución de llamada forEach (el botón que forEach pasó como argumento¹ a la devolución de llamada al llamarlo); sin él, no tiene nada con qué trabajar. De manera similar, el parámetro e es cómo el código del controlador de eventos puede referirse al evento que está manejando (el argumento de evento con el que el sistema de eventos en el navegador llamó a la función).
Esto es lo que puede ser un ejemplo más simple del botón:
function setUpHandler(button) { button.addEventListener("click", function() { console.log("Clicked!"); }); } const btn1 = document.getElementById("btn1"); setUpHandler(btn1); const btn2 = document.getElementById("btn2"); setUpHandler(btn2); <input type="button" class="question-btn" id="btn1" value="Button 1"> <input type="button" class="question-btn" id="btn2" value="Button 2"> Las dos llamadas a setUpButton son como las dos llamadas que forEach le haría si hiciéramos esto (excepto que forEach también pasaría más argumentos [el índice y la lista] que setUpHandler simplemente ignora porque no declara parámetros para recibirlos en) :
document.querySelectorAll(".question-btn").forEach(setUpHandler); El button en setUpHandler es el parámetro en el que la función recibe ese primer argumento .
¹ Solo una nota rápida sobre los términos "parámetro" y "argumento" ya que aparecieron arriba:
function add(a, b) { // ^−−^−−−−−−−−−−−−−−− "parameters" return a + b; } const sum = add(1, 2) // ^−−^−−−−−−−−−−−− "arguments" console.log(sum); Un parámetro es la cosa con nombre (como una variable) que usa una función para referirse al argumento que se le pasa cuando se llama. En lo anterior, los parámetros son a y b . Los argumentos son los valores 1 y 2 . (Y también le pasamos a console.log un argumento: sum ).