I have created two arrays and then utilized a function to assign values to certain variables based on the element clicked in the array. (Refer to the first code snippet) However, I am now looking to execute another function that makes use of these assigned variables. (Check out the 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 following code snippet represents the function I wish to run, but I am unsure where or how to integrate it. I am consistently encountering an error "Uncaught TypeError: Cannot read properties of undefined (reading 'remove')", yet when I test it in the console, it functions properly.
function checkAnswer() {
if (wordId == ansId) {
wordEl.remove();
ansEl.remove();
} else {
alert("Incorrect! Please try again.");
}
}
Here is the HTML structure:
<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>