So I’m making a little project to see how well I can assemble websites using JS coding and ran into an issue that broke my site for a bit. It’s original purpose was to be the functionality of a multiple choice question
here’s the code:
const answerOne = document.getElementById(“ans-one”);
const answerTwo = document.getElementById(“ans-two”);
const answerThree = document.getElementById(“ans-three”);
const retry = document.getElementById(“retry”);
const fourthContainer = document.getElementById(“fourth”);
const response = document.getElementById(“response”);
answerOne.disabled = false;
answerTwo.disabled = false;
answerThree.disabled = false;
retry.disabled = true;
/* Answer A: Correct */
answerOne.addEventListener(“click”, function(){
fourthContainer.style.backgroundColor = “#FFCC00”;
response.innerHTML = “That’s correct! According to Georgia Demographics, Georgia has 159 counties IN TOTAL”;
answerTwo.disabled = true;
answerThree.disabled = true;
setTimeout(function () {
retry.disabled = false;
retry.style.opacity = 1;
retry.innerHTML = "try again";
}, 2500);
});
/* Answer B: Incorrect */
answerTwo.addEventListener(“click”, function(){
fourthContainer.style.backgroundColor = “#FF3300”;
response.innerHTML = “Incorrect, try again.”;
answerOne.disabled = true;
answerThree.disabled = true;
setTimeout(function () {
retry.disabled = false;
retry.style.opacity = 1;
retry.innerHTML = "try again";
}, 1500);
});
/* Answer C: Incorrect */
answerThree.addEventListener(“click”, function(){
fourthContainer.style.backgroundColor = “#FF3300”;
response.innerHTML = “Incorrect, try again.”;
answerOne.disabled = true;
answerTwo.disabled = true;
setTimeout(function () {
retry.disabled = false;
retry.style.opacity = 1;
retry.innerHTML = "try again";
}, 1500);
});
Apparently it didn’t work, and I still can’t figure out why. Can someone help me out, please?