有沒有更簡單的方法來編寫這個沒有變量的 if/else 語句？

Question

我有一個輸入的測驗。 在第一次輸入時，它會對答案進行評分。 在第二次輸入時，它會重置一個新問題。

1. 有沒有更簡單的方法來寫這個沒有flip變量？

2. 如果沒有，有沒有辦法將變量包含在內，以便我可以將函數作為一個整體導出？

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();
    }
  }
});

Answer 1

您可以使用數據屬性或類

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")
  }
});

Answer 2

我認為更好和更有用的是輸入類（您可以在一頁中使用更多問題）。

只需在第一次輸入時將類添加到輸入，例如“已驗證”，然后在另一個輸入時檢查類，當有“已驗證”時，您可以重置問題和類。

Answer 3

如果您想保持代碼相同，您可以使用閉包- 本質上是在函數內移動變量，但讓該函數返回一個新函數，當事件觸發時偵聽器調用該函數。 這是有效的，因為返回的函數帶有對其“外部詞法環境”的引用，在這種情況下，它是flip變量。

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();
      }
    }
  }
});

然后在您的主代碼中：

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());

Answer 4

我們可以從中獲得一些樂趣，並在第一個監聽器的末尾設置一個新的監聽器，同時讓我們的監聽器只運行一次。

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)

您也可以通過重新分配覆蓋原始回調的onkeyup處理程序來做到這一點：

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;

這只是解決問題的不同方法。 數據屬性方法是完全有效的。