使用按钮循环遍历数组
Looping through array using a button
好的,本质上我想创建一个简短的测验,其中包含下一个和上一个按钮。 我想遍历两个数组,问题和选择,并在最后有一个分数。 我已经阅读了有关 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。谢谢大家。
这将循环浏览您的问题,希望这有助于您继续。
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="answers" value="'
+ cArray[index][i] + '"/ > ' + cArray[index][i] + ' </label>';
}
html += '</div > ';
document.getElementById('qArray').innerHTML = html;
index++;
}
下面是一个非常基本的示例。 这将修改现有的 DOM 项。 您不能在已加载的文档上使用document.write()
,否则它会清除您拥有的所有内容并重新开始,这不是将内容放入 DOM 的最有效方法。
此示例在页面上有许多字段,它加载一个问题,然后在您按下一步按钮时检查答案。
.HTML:
<div id="question"></div>
<input id="answerswer" 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("answerswer").value = "";
}
}
loadQuestion();
function checkAnswer() {
var answer = document.getElementById("answerswer").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/
相关文章:
- 循环遍历以数组为值的Javascript对象
- 如何遍历包含对象的数组-javascript
- JS.循环遍历多维数组,以计数元素在每列中的出现次数
- 根据PHP中数组的长度在Google Maps API中循环遍历标记
- 无法在javascript中循环遍历对象数组
- 如何使用jquery遍历具有动态添加元素的数组
- 我想遍历一个对象数组,我不想要任何重复项
- 一次循环遍历一组
- 在 jquery 中循环遍历 2 个数组并组合
- 如何遍历一组值对 JSON 对象
- meteor 遍历一组会话以检查值是否已更改
- 循环遍历 2 个数组 JavaScript
- 循环遍历一组元素 jQuery
- Ember循环遍历一组复选框并获取选中的项目
- Javascript遍历一组属性
- 如何循环遍历一组jQuery元素—一次4个
- 循环遍历一组名称,每隔一段时间采取操作
- 使用D3js循环遍历一组图像
- 在javascript中遍历一组对象,并从该函数返回true
- 我如何遍历一组JS对象并为每个对象打印语句