使用按钮循环遍历数组答案

【问题标题】：Looping through array using a button使用按钮循环遍历数组
【发布时间】：2013-11-05 07:21:37
【问题描述】：

好的，本质上我想创建一个包含下一个和上一个按钮的简短测验。我想遍历两个数组，问题和选择，最后得到一个分数。我已经阅读了有关 DOM 和事件的章节，但它显然没有点击。

真的，我需要一些代码来展示如何操作 DOM 的具体示例。到目前为止，我只有数组和一个声明 x 实际上是通过 id 获取我的元素的函数。哈哈。

抱歉，我没有更多代码可以提供。我试图将 id 附加到一个段落，然后通过它的 id 和 document.write 数组来获取它，但这会替换按钮。如果你运行下面的代码，你会明白我在说什么。

<!DOCTYPE html>
<html>
<head>
    <title>Bom</title>
</head>
<body>
    <input type="button" value="Iterate" id="myButton" onclick="iter_onclick()">
    <p id="qArray">Some Text</p>

    <script>
        var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"];

        var cArray = [["Bill","Billy", "Arnold", "Tyler"],["Oz"," Buffon","Tupac","Amy"],["Tony Blair","Brack Osama","Barack Obama","Little Arlo"],["Emma Stone","Tony the Tiger","","The Smurf Girl"]];

        function iter_onclick () {
            var x = document.getElementById("qArray");
            document.write("Hello World");
        }        
     </script>
</body>
</html>`

就像我说的，这是我第一次尝试真正操纵 DOM，我知道我想做什么。我只是不知道该怎么做。我理解所有的语法、事件和对象等等。但是，我不确定如何应用它。此外，没有 Jquery。我想知道如何使用 Javascript 创建应用程序，然后进入 Jquery。谢谢大家。

【问题讨论】：

你为什么不用jquery？
我的意思不是我不想学习它，只是我想知道如何在没有它的情况下学习它。所以，当我学习 Jquery 时，我完全理解了它。
试试jsfiddle.net/arunpjohny/DAzns/1
页面加载后不要 document.write。它会清除您的页面 :) 使用 x.innerHTML = "Hello World";

标签： javascript html css events dom-manipulation

【解决方案1】：

这将遍历您的问题，希望这可以帮助您继续。

var qArray = ["Who is my dog?", 
       "who is the prez?", 
       "Who is my girlfriend?", 
       "Who am I?"];

var cArray = [
    ["Bill", "Billy", "Arnold", "Tyler"],
    ["Oz", " Buffon", "Tupac", "Amy"],
    ["Tony Blair", "Brack Osama", "Barack Obama", "Little Arlo"],
    ["Emma Stone", "Tony the Tiger", "Amy Dahlquist", "The Smurf Girl"]
];

var index = 0;

function iter_onclick() {
    //if this is the last question hide and displays quiz ends            
    if (index >= qArray.length) {
        document.getElementById('qArray').innerHTML = '<div>Quiz End, Thank you</div>'
        document.getElementById('myButton').style.visibility = 'hidden ';
        return false;
    }

    var html = ' <div> ' + qArray[index] + ' </div> <div>';
    for (var i = 0; i < cArray[index].length; i++) {
        html += '<label><input type="radio" name="ans" value="' 
             + cArray[index][i] + '"/ > ' + cArray[index][i] + ' </label>';
    }
    html += '</div > ';
    document.getElementById('qArray').innerHTML = html;

    index++;
}

【讨论】：

谢谢伙计。这真的是我一直在寻找的。我会仔细研究它，直到我能记住所有的细节。在id里面写html真的是我想知道的。

【解决方案2】：

这是一个非常基本的示例，您可以从中学习。这会修改现有的 DOM 项。您不能在已加载的文档上使用document.write()，否则它将清除您拥有的所有内容并重新开始，这不是将内容放入 DOM 的最有效方式。

此示例在页面上有许多字段，它会加载一个问题，然后在您按下下一步按钮时检查答案。

HTML：

<div id="question"></div>
<input id="answer" type="text"><br><br>
<button id="next">Next</button>  <br><br><br>
Number Correct So Far: <span id="numCorrect">0</span>

Javascript（在脚本标签中）：

var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"];

var cArray = [["Bill","Billy", "Arnold", "Tyler"],["Oz"," Buffon","Tupac","Amy"],["Tony Blair","Brack Osama","Barack Obama","Little Arlo"],["Emma Stone","Tony the Tiger","Amy Dahlquist","The Smurf Girl"]];

var questionNum = -1;
var numCorrect = 0;

function loadQuestion() {
    ++questionNum;
    if (questionNum >= qArray.length) {
        alert("all questions are done");
    } else {
        document.getElementById("question").innerHTML = qArray[questionNum];
        document.getElementById("answer").value = "";
    }
}

loadQuestion();

function checkAnswer() {
    var answer = document.getElementById("answer").value.toLowerCase();
    var allowedAnswers = cArray[questionNum];
    for (var i = 0; i < allowedAnswers.length; i++) {
        if (allowedAnswers[i].toLowerCase() == answer) {
            return true;
        }
    }
    return false;
}

document.getElementById("next").addEventListener("click", function(e) {
    if (checkAnswer()) {
        ++numCorrect;
        document.getElementById("numCorrect").innerHTML = numCorrect;
        loadQuestion();
    } else {
        alert("Answer is not correct");
    }
});

工作演示：http://jsfiddle.net/jfriend00/gX2Rm/

【讨论】：

嘿，谢谢，我没有选择你的最佳答案的唯一原因是，我是个菜鸟，代码有点抽象。另外，我正在寻找单选按钮选项。虽然很抱歉，但我没有具体说明。谢谢，尽管这也有很大帮助。 :)
@JerryWalker - 我希望你能向他们两个学习。学习其他人的代码是一种很好的学习方式。