javascript - 获取选中的单选按钮时出现问题 - JavaScript

Question

我正在尝试获取附加到选中单选按钮的自定义数据属性(数据结尾句子)中的数据。我为此目的创建了一些代码，但由于某种原因，我从所有单选按钮获取数据结尾句子属性，而不是仅从选中的单选按钮获取数据结尾句子属性。有人可以用另一双眼睛检查我的代码并告诉我我做错了什么吗？

我已经使用了 Chrome 开发者工具，但找不到任何可以表明为什么我的代码没有达到我想要的目的的内容。如果有人想查看此问题的实时版本，可以访问此 link查看我的开发站点 - 尽管我认为下面的代码应该足够了。

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 方法 - 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"));
            }
        }
    }
}

我将永远感激任何解释我错在哪里的人。

PS:我这样做是为了学习经验，所以如果答案坚持纯 JS，我将不胜感激。

Answer 1

问题是导致循环的第二个 for 循环

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>

<小时/>

您还可以使用:checked selector在 modern browsers喜欢

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>