Looping through array using a button

Ok, in essence I want to create a short quiz that has a next and previous button. I want to loop through two arrays, questions and choices, and have a score at the end. I have read chapters on the DOM and Events and it is just not clicking apparently.

Really I need a little bit of code that shows a concrete example of how to manipulate the DOM. What I have so far are only the arrays, and a function declaring that x is in fact getting my element by id. haha.

Sorry I don't have more code to give. I tried to attach the id to a paragraph, and then get it by it's id and document.write the array, but that replaces the button. If you run the code below you'll see what I'm saying.

<!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>`

Like I said, this is my first attempt at truly manipulating the DOM, and I know what I want to do. I just don't know how to do it. I am understanding all the syntax and events and objects and such. But, I'm not really sure how to apply it. Also, no Jquery. I want to know how to create applications with Javascript and then work my way into Jquery. Thanks people.

标签： javascript html css events dom-manipulation

2条回答

欢心

2楼-- · 2019-06-13 22:44

This will loop through your questions, hope this helps you to proceed.

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++;
}

0人赞添加讨论(0) 举报

Anthone

3楼-- · 2019-06-13 22:44

Here's a very basic example you can work from. This modifies the existing DOM items. You cannot use document.write() on a document that is already loaded or it will clear everything you have and start over and it's not the most efficient way to put content into the DOM.

This example has a number of fields on the page, it loads a question and then checks the answer when you press the next button.

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 (in script tag):

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

Working demo: http://jsfiddle.net/jfriend00/gX2Rm/

0人赞添加讨论(0) 举报

Looping through array using a button

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间