I have a quiz with one input. On the first enter press, it grades the answer. On the second enter press, it resets a new question.

1. Is there a simpler way to write this without the flip variable?

2. If not, is there a way to include the variable inside so that I could export the function as a whole?

var flip = true;

document.getElementById("guess-input").addEventListener("keyup", (event) => {
  if (event.key === "Enter") {
    event.preventDefault();
    if (flip === true) {
      flip = false;
      check();
    } else {
      flip = true;
      reset();
    }
  }
});

CodePudding user response：

You can use a data-attribute or a class

document.getElementById("guess-input").addEventListener("keyup", (event) => {
  if (event.key === "Enter") {
    event.preventDefault();
    const tgt = event.target;
    if (tgt.matches(".flipped")) check();
    else reset();
    tgt.classList.toggle("flipped")
  }
});

CodePudding user response：

I think nicer and more usable will be a class on input (you can use more questions in one page).

Just on first enter add class to an input for example "validated" and on another enter you check the class and when there will be "validated", you can reset the question and class.

CodePudding user response：

If you wanted to keep the code the same you could use a closure - essentially move your variable inside the function but have that function return a new function that the listener calls when the event is triggered. This works because the returned function carries with it references to its "outer lexical environment" which, in this case, is the flip variable.

export default function guesser() {
  let flip = true;
  return function (event) {
    if (event.key === "Enter") {
      event.preventDefault();
      if (flip === true) {
        flip = false;
        check();
      } else {
        flip = true;
        reset();
      }
    }
  }
});

And then in your main code:

import guesser from './guesser';

const el = document.getElementById('guess-input');

// Call the guesser function which returns that inner
// function which the listener calls when the event is triggered
el.addEventListener('keyup', guesser());

CodePudding user response：

We can have some fun with it and set a new listener at the end of the first one, while making our listeners run only once.

const input = document.getElementById("guess-input") // to keep it neat
const options = {once: true}

function checker(e){
  if (e.key !== 'Enter') return
  e.preventDefault();
  check();
  input.addEventListener('keyup', resetter, options);
}

function resetter(e) {
  if (e.key !== 'Enter') return
  e.preventDefault();
  reset();
  input.addEventListener('keyup', checker, options);
}

input.addEventListener("keyup", checker, options)

You can also do it by reassigning the onkeyup handler which overwrites the original callback:

const input = document.getElementById("guess-input") // to keep it neat

function checker(e){
  if (e.key !== 'Enter') return
  e.preventDefault();
  check();
  input.onkeyup = resetter;
}

function resetter(e) {
  if (e.key !== 'Enter') return
  e.preventDefault();
  reset();
  input.onkeyup = checker;
}

input.onkeyup = checker;

This is just a different approach to the problem. The data attribute approach is perfectly valid.