获取已选中的单选按钮的问题 - JavaScript

时间:2015-10-07 03:02:04

标签: javascript html radio-button

我正在尝试获取附加到已选中单选按钮的自定义数据属性(data-endingsentence)中的数据。我已经为此创建了一些代码,但出于某种原因,我从所有单选按钮获取data-endingsentence属性,而不是仅仅检查了。任何人都可以用另一双眼睛看我的代码并告诉我我做错了什么?

我愚弄了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,我会很感激。

1 个答案:

答案 0 :(得分:1)

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

&#13;
&#13;
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"));
    }
  }
}
&#13;
<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>
&#13;
&#13;
&#13;

您还可以使用:checked selector中的modern browsers

&#13;
&#13;
function getEndingSentence() {
  var quizRadio = document.querySelector('input[name="rq"]:checked');
  if (quizRadio) {
    alert(quizRadio.getAttribute("data-endingsentence"));
  }
}
&#13;
<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>
&#13;
&#13;
&#13;