My quiz automatically submits when i plug in a chrome extension that involves doing an api call

16 Views Asked by At

Below is the code for the function sendQuestion that runs when a button is clicked, it does post api call and receives the answer in return. It api call is working and the answer_div shows loading... but before it just receives answer, something is triggered and my quiz is submitted. In quizzes where all the questions aren't in the same page, it goes to the next quiz question in the next webpage. This code is in the content script file.

async function sendQuestion(e) {
  var id = parseInt(e.target.id);

  q_div = texts[id].getElementsByTagName("div")[1]; // select the question div of the clicked button

  // Creating the answer display
  if (!answer_div_created[id]) {
    var answer_div = document.createElement("div");
    answer_div.setAttribute("class", "answer-div");
    var answer_p = document.createElement("p");
    answer_p.setAttribute("class", "answer-p");
    answer_div.appendChild(answer_p);
    answer_p.innerText = "Loading...";
    answer_div_created[id] = true;
    q_div.appendChild(answer_div);

    // fetching the data
    let response = await fetch(myurl, {
      method: "POST",
      headers: { "Content-type": "application/json; charset=UTF-8" },
      body: JSON.stringify({
        body
      }),
    });

    const data = await response.json();

    //updating the loading... to correct answer
    answer_div.innerText = data.answer;
  }
}

I had a removEventListener for the button that calls this function and thought it was causing the problem, but it wasn't turns out.

0

There are 0 best solutions below