Urgent help pls!Cant get my radio button to remain checked

function displayQuestion() {
  let currentQuestion = quizArr[currentQuestionIndex];
  document.getElementById("question").innerHTML = currentQuestion.question;
  document.getElementById("a").innerHTML = currentQuestion.answers.a;
  document.getElementById("b").innerHTML = currentQuestion.answers.b;
  document.getElementById("c").innerHTML = currentQuestion.answers.c;
  document.getElementById("d").innerHTML = currentQuestion.answers.d;

  // Check if there is a previously selected answer for the current question
  const selectedAnswer = selectedAnswers.find(answer => answer.questionIndex === currentQuestionIndex);
  if (selectedAnswer) {
    document.getElementById(selectedAnswer.answer).checked = true;
  }
}

function nextQuestion() {
  // Uncheck the previously selected answer
  document.querySelectorAll('input[type="radio"]').forEach(radio => {
    radio.checked = false;
  });

  // Move to the next question
  currentQuestionIndex++;
  displayQuestion();
}

function previousQuestion() {
  // Uncheck the previously selected answer
  document.querySelectorAll('input[type="radio"]').forEach(radio => {
    radio.checked = false;
  });

  // Move to the previous question
  currentQuestionIndex--;
  displayQuestion();
}
pls help me,can u help me make d radio button remain checked ,it clears anytime i click on d next and previous button,what am i doing wrong

you are unchecking it, if you don’t want the behaviour don’t code it…

for more help please share your html with us too

1 Like

the html for the radio button
<divclass= “answer-options”>

<label’for=“option-1” class=“label1”>Naruto

<label’for=“option-2” class=“label1”>migi

<label’for=“option-1” class=“label1”>eren

pls help me with this

if I put this code with the code in your first code together, nothing happens. Please provide enough code to reproduce the issue you are describing.

Also, why are you unchecking the radio buttons if you don’t want them unchecked?

i googled out solutions on various website and’chatgpt and thats what it provided cause i was having issue when i select an option in d first question of my quiz,it automatically selects d other options for d rest of the questions meaning;all of d questions will have a value of option b if i select b in d first question,im building a quiz and imstuck at making d radio button stay selected

don’t listen to ChatGPT, it can’t problem-solve, that is a thing you need to do on your own.

You still have no provided the code needed to reproduce your issue and help you

let quizArr = [
	{
		question: "What is the name of the main character in Naruto?",
		answers: {
			a: "Naruto Uzumaki",
			b: "Sasuke Uchiha",
			c: "Kakashi Hatake",
			d: "Tsunade"
		},
	{
		question: "What is the name of the strongest tailed beast in the Naruto series?",
		answers: {
			a: "Kyuubi",
			b: "Chomei",
			c: "Gyuki",
			d: "Ten-Tails"
		}
	},
	// Add more questions here...
];

let currentQuestionIndex = 0;

// Function to display the current question and answers
function displayQuestion() {
	let currentQuestion = quizArr[currentQuestionIndex];
	document.getElementById("question").innerHTML = currentQuestion.question;
	document.getElementById("a").innerHTML = currentQuestion.answers.a;
	document.getElementById("b").innerHTML = currentQuestion.answers.b;
	document.getElementById("c").innerHTML = currentQuestion.answers.c;
	document.getElementById("d").innerHTML = currentQuestion.answers.d;
}

// Call the function to display the first question
displayQuestion();

// Add event listeners for the next and previous buttons
document.getElementById("next").addEventListener("click", nextQuestion);
document.getElementById("previous").addEventListener("click", previousQuestion);

// Function to move to the next question
function nextQuestion() {
	currentQuestionIndex++;
	displayQuestion();
}

// Function to move to the previous question
function previousQuestion() {
	currentQuestionIndex--;
	displayQuestion();
}
function getSelectedAnswer() {
  const selectedAnswer = this.value;
  selectedAnswers.push({ questionIndex: questionIndex, answer: selectedAnswer });

}

Alright ma,this was my previous js code before chatgpt,i got stuck hete before i could do d comparison of d selected answer with’d’correct answer i will’create

and what is your html?

<div class="quiz-container">
	<h1>Anime Quiz</h1>
	<span class="progress-indicator">2/10</span>
	<p id="question-display">Question 1: ...</p>
	<div class="answer-options">
		<input type="radio" name="options" id="option-1" value="1"/>
<label for="option-1" class="label1">Naruto</label>
<input type="radio" name="options" id="option-2" value="2"/>
<label for="option-2" class="label2">sasuke</label>
<input type="radio" name="options" id="option-3" value="3"/>
<label for="option-3" class="label3">kakashi</label>
<input type="radio" name="options" id="option-4" value="4"/>
<label'for="option-4" class="label4">sakura</label>
	</div>
<button id="previous-btn">Previous</button>
<button id="next-btn">Next</button>
<button id="submit-btn">Submit</button>
</div>
<script src="index.js"></script>

pls this is my html

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

alright ma,pls i have provided d html and js code.pls’can u help me with this issue,im really lost

you have syntax errors, I can’t use your code, please fix it

<div class="quiz-container">
	<h1>Anime Quiz</h1>
	<span class="progress-indicator">2/10</span>
	<p id="question-display">Question 1: ...</p>
	<div class="answer-options">
		<input type="radio" name="options" id="option-1" value="1"/>
<label for="option-1" class="label1">Naruto</label>
<input type="radio" name="options" id="option-2" value="2"/>
<label for="option-2" class="label2">sasuke</label>
<input type="radio" name="options" id="option-3" value="3"/>
<label for="option-3" class="label3">kakashi</label>
<input type="radio" name="options" id="option-4" value="4"/>
<label'for="option-4" class="label4">sakura</label>
	</div>
<button id="previous-btn">Previous</button>
<button id="next-btn">Next</button>
<button id="submit-btn">Submit</button>
</div>
<script src="index.js"></script>

pls this is my html

i"ve fixed d html code ma,pls help me

please stop removing formatting from your html. I have already formatted it twice. Please put the formatting back on, you may notice none of the html syntax is visible now.

and it’s the javascript code that has syntax errors that you need to fix. Also there are no elements with ids a b c or d

what kind of help are you looking for? you were asking for a specific functionality, but I’m really confused on what’s working here

there are no’elements with a,b,c or d ,my’problem is d radiobuttons,when i check a radio button on’d first question,the others are checked automatically for d nxt questions without me ticking them;myself and d solution chatgpt gave me unchecks them for me after i’click d nxt and previous btn

I can’t see this behaviour, your code doesn’t work, the javascript selects elements with id a, b, c, d
that id is not present in the html code

please give me the code you have written that works like you write

also please format your html