Przechwycenie danych z formularza input type=radio za pomocą pętli

Question

Cześć! Chciałbym pobierać informację, która opcja została wybrana przez użytkownika. Podaję fragmenty html:
 

<section class="quiz">
				<progress class="quiz__progress" value="0" max="5"></progress>
				<form action="" class="quiz__question">
					<p class="quiz__text"></p>
					<div class="quiz__answer-list">
						<div class="quiz__answer-item">
							<input type="radio" value="A" id="answerOne" name="answer" class="quiz__answer answerA">
							<label for="answerOne" class="quiz__answer answer-one-label"></label>
						</div>
						<div class="quiz__answer-item">
							<input type="radio" value="B" id="answerTwo" name="answer" class="quiz__answer answerB">	
							<label for="answerTwo" class="quiz__answer answer-two-label"></label>
						</div>
						<div class="quiz__answer-item">
							<input type="radio" value="C" id="answerThree" name="answer" class="quiz__answer answerC">
							<label for="answerThree" class="quiz__answer answer-three-label"></label>
						</div>
					</div>
				</form>
				<button class="button accept">Zatwierdź</button>
				<button class="button ignore">Pomiń</button>
				<button class="button summary">Zatwierdź i zakończ</button>
				<button class="button ignore-last">Pomiń i zakończ</button>
				
			</section>

i kodu js:

 

/* elementy pytania - input*/
const answerInputA = document.querySelector(".answerA");
const answerInputB = document.querySelector(".answerB");
const answerInputC = document.querySelector(".answerC");
let answerList = [answerInputA, answerInputB, answerInputC];


let currentAnswer = "";


/* pobiera wybrane odpowiedzi i je zapisuje w zmiennej getAnswer */
const getAnswerFromUser = () => {
    for (answer of answerList)
        {
        if (answer.checked) {
            currentAnswer = answer.value;}
        else {
            currentAnswer = "Z";}
        };
};

Program zachowuje się tak, że niezależnie jaką opcję wybiorę, to w zmiennej currentAnswer ląduje string "Z".

Czy ja robię błąd w pętli, czy źle pobieram dane? Czy coś przeoczyłem? Spójrzcie proszę, bo cudze oczy zobaczą to, czego własne nie widzą ;)

Thank You from the mountain ;)

Answer 1

W momencie znalezienia zaznaczonej opcji musisz przerwać wykonywanie dalej pętli. na przykłąd w ifie dodać linijkę

break;

Do pobrania wartości z radio inputa istnieje sprytny trick z wykorzystaniem CSS-a

const currentAnswer = document.querySelector('input[name=answer]:checked').value

Comments

Dzięki! Dodałem break; i zadziałało! Teraz patrzę, że to taki prosty błąd był i sam się z siebie śmieję ;) Sprawdzę sobie ten trick także. Z serca dziękuję!