javascript function returns undefined instead of array values?

Question

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 undefined

I will be simple and direct...

I want to return the text value of the button i press using the listener function inside addEventListener. However this is not working as expected, and what ever i try it either returns undefined or not work at all, is it even possible to return a value from an event listener?

If it is not, what kinda of alternatives do I have?

Thanks in advance!

Your outer function has no return statement. Only the inner callback has one. Also, you are looping before any button has pressed. All the collecting should be coded inside the event handler. — trincot
– trincot, Commented Aug 7, 2022 at 21:54
chosenOrder doesn't return anything. The function passed to addEventListener returns myChoice. Ultimately the function has to be asynchronous (and streamable, if not observable) in order to "return" a value from an event listener. Sounds like you need to rethink your design. — Heretic Monkey
– Heretic Monkey, Commented Aug 7, 2022 at 21:55

blex · Accepted Answer · 2022-08-07 21:56:24Z

1

The return statement is inside the event handler, and cannot be taken into account by the wrapping function (when the handler is executed - asynchronously, the wrapping function call has already ended and returned). An alternative could be to use Promises. In the outer function, return the Promise, and inside the event listener, resolve that Promise with the value:

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>

answered Aug 7, 2022 at 21:56

blex

25.7k6 gold badges48 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javascript function returns undefined instead of array values?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related