Unable to attach an event listener to an element fetched from an API

Question

Unable to attach an event listener to an element fetched from an API

I'm currently in the process of developing a trivia web application using an API, and my goal is to incorporate an event listener onto the button which corresponds to the correct answer. This way, when users click on it, a message will appear confirming their correctness and prompting a new question to be displayed. Below is a snippet of the code I am working with:

function useApiData(triviaObj) {
  let answers = sortArrayRandomly([
    triviaObj.results[0].correct_answer,
    triviaObj.results[0].incorrect_answers[0],
    triviaObj.results[0].incorrect_answers[1],
    triviaObj.results[0].incorrect_answers[2],
  ]);

  document.querySelector("#category").innerHTML = `Category: ${triviaObj.results[0].category}`;
  document.querySelector("#difficulty").innerHTML = `Difficulty: ${triviaObj.results[0].difficulty}`;
  document.querySelector("#question").innerHTML = `Question: ${triviaObj.results[0].question}`;

  document.querySelector("#answer1").innerHTML = `${answers[0]}`;
  document.querySelector("#answer2").innerHTML = `${answers[1]}`;
  document.querySelector("#answer3").innerHTML = `${answers[2]}`;
  document.querySelector("#answer4").innerHTML = `${answers[3]}`;

  let rightAnswer = triviaObj.results[0].correct_answer;
  rightAnswer.addEventListener("click", correctAnswer);

  console.log(answers);
}

function correctAnswer() {
  alert("Correct!"); //changed alert message for clarity
  getTrivia();
}

I encountered an issue indicating that AddEventListener is not recognized as a function. How can I resolve this problem?

javascript arrays api addeventlistener

Answer 1

Answer №1

Utilize a looping mechanism to populate the answer elements. Within this loop, you can validate if the current answer is correct and then attach the event listener accordingly.

answers.forEach((answer, i) => {
  let button = document.querySelector(`#answer${i+1}`);
  button.innerHTML = answer;
  if (answer == triviaObj.results[0].correct_answer) {
    button.addEventListener("click", correctAnswer);
  } else {
    button.removeEventListener("click", correctAnswer);
  }
}

Answer 2

Utilize a looping mechanism to populate the answer elements. Within this loop, you can validate if the current answer is correct and then attach the event listener accordingly.

answers.forEach((answer, i) => {
  let button = document.querySelector(`#answer${i+1}`);
  button.innerHTML = answer;
  if (answer == triviaObj.results[0].correct_answer) {
    button.addEventListener("click", correctAnswer);
  } else {
    button.removeEventListener("click", correctAnswer);
  }
}

Answer 3

Answer №2

Event listeners should be attached to DOM elements, not data variables. Locate the correct answer element and link the event listener there:

const correctAnswer = quizObj.questions[0].correct_answer;
const chosenAnswer = options.find((item) => item === correctAnswer);
const correctElement = Array.from(document.querySelectorAll('*[id^="option"]'))
  .find((element) => element.innerText.includes(correctAnswer))
correctElement.addEventListener("click", handleCorrectAnswer);

Answer 4

Event listeners should be attached to DOM elements, not data variables. Locate the correct answer element and link the event listener there:

const correctAnswer = quizObj.questions[0].correct_answer;
const chosenAnswer = options.find((item) => item === correctAnswer);
const correctElement = Array.from(document.querySelectorAll('*[id^="option"]'))
  .find((element) => element.innerText.includes(correctAnswer))
correctElement.addEventListener("click", handleCorrectAnswer);

Answer 5

Answer №3

Let's say that

triviaObj.results[0].correct_answer

is a numerical representation of the correct answer, in that case:

Switch out

let rightAnswer = triviaObj.results[0].correct_answer;

for

let rightAnswer = document.querySelector(`#answer${triviaObj.results[0].correct_answer}`);

This alternative approach is much simpler compared to Zan Anger's method.

Answer 6

Let's say that

triviaObj.results[0].correct_answer

is a numerical representation of the correct answer, in that case:

Switch out

let rightAnswer = triviaObj.results[0].correct_answer;

for

let rightAnswer = document.querySelector(`#answer${triviaObj.results[0].correct_answer}`);

This alternative approach is much simpler compared to Zan Anger's method.

Unable to attach an event listener to an element fetched from an API

Answer №1

Answer №2

Answer №3

Similar questions

Invoke a controller in Prestashop by utilizing AJAX technology

How can I update the image src in JavaScript and make sure the image refreshes properly?

The issue of duplicate results appearing in the Wikipedia viewer persists even after conducting a second search

Loading modules conditionally in Nuxt.js

Clear Vuex state upon page refresh

Is there a way to create a universal getter/setter for TypeScript classes?

Encountering the error "ReferenceError: Cannot access 'data' before initialization" during deployment on Vercel

Looking to incorporate AAD calling functionality in a React and Node application by utilizing the Graph API for communication/calls

What is the best way to adjust the fill animation of an inline svg based on the movement of the mouse within the parent div?

The iframe is not large enough to contain all the HTML content

Creating an array object in JavaScript is a straightforward process that involves using the array

Using JavaScript to apply styling on images with overlays

Is there a way to identify the element causing an error in promise.map and then either log it to the console or skip it using code?

Aligning an object in ThreeJS to always face the camera, ensuring it is perfectly straight and flat

The issue of checkboxes not being sorted properly in Slick Grid

Choosing an Array of Integers in PostgreSQL: A Guide

Learn how to access the data stored in an array within a function using PHP

Creating prototypes for objects starting from an empty state

Loading indicator displayed at the top of a div using JavaScript/jQuery

Use Entity Objects instead of Strings in your Ajax requests for improved data handling