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.