Issues with fetching checked radio buttons - JavaScript

Question

I'm attempting to fetch the data within custom data attributes (data-endingsentence) affixed to checked radio buttons. I've created some code for that purpose, but for some reason I'm getting the data-endingsentence attribute from all radio buttons as opposed to just checked ones. Could anyone please look over my code with another set of eyes and tell me what I've done wrong?

I've fooled around with the Chrome developer tools, but I can't find anything that would indicate why my code isn't achieving the purpose I want it to. If anyone wants to view a live version of this problem, you can visit this link to see my development site - although I think the below code should be sufficient.

HTML

            <div class="question invisible" id="question-1">
            <form>
                <h2 class="section-heading text-center">In which Kingdom or Realm were you born?</h2>


                <p style="font-style: italic">Your story begins in in the country that you were born. What few years you spent in your home had defining effects on your character.</p>
                <input data-endingsentence="as a young child grew up in Redania (located in the Northern Kingdoms) enjoying prosperity the nation held." name="rq" onclick="setAnswerButton()" type="radio">Redania
                <input data-endingsentence="was no common boor when it came to intelligence due to being born in Temeria - the crown of educated nations in the Northern Kingdoms" name="rq" onclick="setAnswerButton()" type="radio">Temeria
                <input data-endingsentence="is by nature capable of withstanding harsh weather as a result of being born in the cold and unforgiving climate of Kaedwen" name="rq" onclick="setAnswerButton()" type="radio">Kaedwen
                <input data-endingsentence="is distrustful by nature due to being raised in Aedirn, which lacks stability and has daily occurrences of attempted regime changes." name="rq" onclick="setAnswerButton()" type="radio">Aedirn
                <input data-endingsentence="was typical cold-hearted Nilfgaardian due to the influence the country embedded within the Witcher while growing up there." name="rq" onclick="setAnswerButton()" type="radio">Nilfgaard
            </form>
        </div>

JavaScript Method - getEndingSentence

function getEndingSentence() {
    var quizRadio = document.getElementsByName("rq");
    for (var i = 0; i < quizRadio.length; i++) {
        if (quizRadio[i].checked) {
            for (i = 0; i < quizRadio.length; i++) {
                alert(quizRadio[i].getAttribute("data-endingsentence"));
            }
        }
    }
}

I will be eternally grateful to anyone that explains where I went wrong.

PS: I doing this for a learning experience, so I'd appreciate it if answers stuck to pure JS.

Answer 1

The problem is the second for loop which is causing the loop

function getEndingSentence() {
  var quizRadio = document.getElementsByName("rq");
  for (var i = 0; i < quizRadio.length; i++) {
    if (quizRadio[i].checked) {
      alert(quizRadio[i].getAttribute("data-endingsentence"));
    }
  }
}

<div class="question invisible" id="question-1">
  <form>
    <h2 class="section-heading text-center">In which Kingdom or Realm were you born?</h2>
    <p style="font-style: italic">Your story begins in in the country that you were born. What few years you spent in your home had defining effects on your character.</p>
    <input data-endingsentence="as a young child grew up in Redania (located in the Northern Kingdoms) enjoying prosperity the nation held." name="rq" onclick="setAnswerButton()" type="radio" />Redania
    <input data-endingsentence="was no common boor when it came to intelligence due to being born in Temeria - the crown of educated nations in the Northern Kingdoms" name="rq" onclick="setAnswerButton()" type="radio" />Temeria
    <input data-endingsentence="is by nature capable of withstanding harsh weather as a result of being born in the cold and unforgiving climate of Kaedwen" name="rq" onclick="setAnswerButton()" type="radio" />Kaedwen
    <input data-endingsentence="is distrustful by nature due to being raised in Aedirn, which lacks stability and has daily occurrences of attempted regime changes." name="rq" onclick="setAnswerButton()" type="radio" />Aedirn
    <input data-endingsentence="was typical cold-hearted Nilfgaardian due to the influence the country embedded within the Witcher while growing up there." name="rq" onclick="setAnswerButton()" type="radio" />Nilfgaard
  </form>
</div>

<button onclick="getEndingSentence()">test</button>

---

You can also use the :checked selector in modern browsers like

function getEndingSentence() {
  var quizRadio = document.querySelector('input[name="rq"]:checked');
  if (quizRadio) {
    alert(quizRadio.getAttribute("data-endingsentence"));
  }
}

<div class="question invisible" id="question-1">
  <form>
    <h2 class="section-heading text-center">In which Kingdom or Realm were you born?</h2>
    <p style="font-style: italic">Your story begins in in the country that you were born. What few years you spent in your home had defining effects on your character.</p>
    <input data-endingsentence="as a young child grew up in Redania (located in the Northern Kingdoms) enjoying prosperity the nation held." name="rq" onclick="setAnswerButton()" type="radio" />Redania
    <input data-endingsentence="was no common boor when it came to intelligence due to being born in Temeria - the crown of educated nations in the Northern Kingdoms" name="rq" onclick="setAnswerButton()" type="radio" />Temeria
    <input data-endingsentence="is by nature capable of withstanding harsh weather as a result of being born in the cold and unforgiving climate of Kaedwen" name="rq" onclick="setAnswerButton()" type="radio" />Kaedwen
    <input data-endingsentence="is distrustful by nature due to being raised in Aedirn, which lacks stability and has daily occurrences of attempted regime changes." name="rq" onclick="setAnswerButton()" type="radio" />Aedirn
    <input data-endingsentence="was typical cold-hearted Nilfgaardian due to the influence the country embedded within the Witcher while growing up there." name="rq" onclick="setAnswerButton()" type="radio" />Nilfgaard
  </form>
</div>

<button onclick="getEndingSentence()">test</button>