How do I run a forEach for two different arrays?

April 4, 2022

I have generated two arrays and then used a function which populates some variables depending on which element in the array was clicked. (See first code snippet) But, now I want to run a function which uses the populated variables. (See second code snippet)

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

The code below shows the function I want to run, but I don’t know where/how to insert it. I keep getting an error "Uncaught TypeError: Cannot read properties of undefined (reading ‘remove’)", however, when I run this in the console, it works.

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

And here is the 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>

>Solution :

You can add a button to call the function:

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>