let btns = document.querySelectorAll("button"); function choosenOrder(chices1) { let btnsPair = [chices1[0], chices1[1]]; btnsPair.forEach((choice) => { choice.addEventListener("click", (c1) => { let mychoice = c1.target.textContent; return mychoice; }) }) } console.log(choosenOrder(btns)); //return undefinedSeré simple y directo...
Quiero devolver el valor de texto del botón que presiono usando la función de escucha dentro de addEventListener. Sin embargo, esto no funciona como se esperaba y, independientemente de lo que intente, devuelve indefinido o no funciona en absoluto, ¿es posible devolver un valor de un detector de eventos?
Si no es así, ¿qué tipo de alternativas tengo?
¡Gracias por adelantado!
La declaración de return está dentro del controlador de eventos y no puede ser tenida en cuenta por la función de ajuste (cuando se ejecuta el controlador, de forma asincrónica, la llamada a la función de ajuste ya finalizó y regresó). Una alternativa podría ser usar Promises. En la función externa, devuelva la Promesa y, dentro del detector de eventos, resuelva esa Promesa con el valor:
let btns = document.querySelectorAll("button"); function choosenOrder(chices1) { return new Promise(resolve => { let btnsPair = [chices1[0], chices1[1]]; btnsPair.forEach((choice) => { choice.addEventListener("click", (c1) => { let mychoice = c1.target.textContent; resolve(mychoice); }); }); }); } choosenOrder(btns).then(console.log); <button>Choice A</button> <button>Choice B</button>