如何运行 forEach 用于两个不同的数组？

Question

我生成了两个数组，然后使用了一个函数，该函数根据单击数组中的哪个元素来填充一些变量。（请参阅第一个代码片段）但是，现在我想运行一个使用填充变量的函数。（见第二个代码片段）

var wordEl;
var ansEl;
var wordId;
var ansId;

englishWords.forEach(function (el) {
      el.addEventListener("click", populateWord, false);
      function populateWord() {
        wordEl = el;
        wordId = el.getAttribute("id");
      }
    });

germanWords.forEach(function (el) {
      el.addEventListener("click", populateAns, false);
      function populateAns() {
        ansEl = el;
        ansId = el.getAttribute("data-id");
      }
    });

下面的代码显示了我想要运行的功能，但我不知道 where/how 插入它。我不断收到错误消息“未捕获的类型错误：无法读取未定义的属性（读取 'remove'）”，但是，当我在控制台中运行它时，它起作用了。

    function checkAnswer() {
      if (wordId == ansId) {
        wordEl.remove();
        ansEl.remove();
      } else {
        alert("Incorrect! Please try again.");
      }
    }

这里是 HTML:

<table>
  <td><div class="englishbutton" id="word1">introspection</div></td>
  <td><div class="englishbutton" id="word2">antidote</div></td>
  <td><div class="englishbutton" id="word3">ambiguous</div></td>
  <td><div class="englishbutton" id="word4">braggart</div></td>
  <td><div class="englishbutton" id="word5">alleviate</div></td>
</table>

<table>
    <td><div class="germanbutton" id="ans1" data-id="word1">Selbstbeobachtung</div></td>
    <td><div class="germanbutton" id="ans2" data-id="word1">Gegenmittel</div></td>
    <td><div class="germanbutton" id="ans3" data-id="word1">zweideutig</div></td>
    <td><div class="germanbutton" id="ans4" data-id="word1">Angeber</div></td>
    <td><div class="germanbutton" id="ans5" data-id="word1">lindern</div></td>
 </table>

Answer 1

您可以添加一个按钮来调用函数：

var wordEl;
var ansEl;
var wordId;
var ansId;

const englishWords = document.querySelectorAll('.englishbutton');
const germanWords = document.querySelectorAll('.germanbutton');

englishWords.forEach(function(el) {
  el.addEventListener("click", populateWord, false);

  function populateWord() {
    wordEl = el;
    wordId = el.getAttribute("id");
  }
});

germanWords.forEach(function(el) {
  el.addEventListener("click", populateAns, false);

  function populateAns() {
    ansEl = el;
    ansId = el.getAttribute("data-id");
  }
});

function checkAnswer() {
  if (!wordEl) {
    alert("Click an English word");
    return;
  }
  if (!ansEl) {
    alert("Click a German word");
    return;
  }
  if (wordId == ansId) {
    wordEl.remove();
    ansEl.remove();
  } else {
    alert("Incorrect! Please try again.");
  }
}

<table>
  <td>
    <div class="englishbutton" id="word1">introspection</div>
  </td>
  <td>
    <div class="englishbutton" id="word2">antidote</div>
  </td>
  <td>
    <div class="englishbutton" id="word3">ambiguous</div>
  </td>
  <td>
    <div class="englishbutton" id="word4">braggart</div>
  </td>
  <td>
    <div class="englishbutton" id="word5">alleviate</div>
  </td>
</table>

<table>
  <td>
    <div class="germanbutton" id="ans1" data-id="word1">Selbstbeobachtung</div>
  </td>
  <td>
    <div class="germanbutton" id="ans2" data-id="word2">Gegenmittel</div>
  </td>
  <td>
    <div class="germanbutton" id="ans3" data-id="word3">zweideutig</div>
  </td>
  <td>
    <div class="germanbutton" id="ans4" data-id="word4">Angeber</div>
  </td>
  <td>
    <div class="germanbutton" id="ans5" data-id="word5">lindern</div>
  </td>
</table>

<button onclick="checkAnswer()">
  Check
</button>

如何运行 forEach 用于两个不同的数组？

How do I run a forEach for two different arrays?

javascript

foreach

function

如何 运行 forEach 用于两个不同的数组？

How do I run a forEach for two different arrays?

javascript

foreach

function

如何运行 forEach 用于两个不同的数组？