Looping through array using a button

Question

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.

I mean it's not that I don't want to learn it, it's just that I'd like to know how to do it without. So, then when I learn Jquery I understand it in it's entirety. — Jerry Walker
– Jerry Walker, Commented Oct 26, 2013 at 3:04
Do not document.write after page load. It wipes out your page :) Use x.innerHTML = "Hello World"; — Akshaya Shanbhogue
– Akshaya Shanbhogue, Commented Oct 26, 2013 at 3:55

N20084753 · Accepted Answer · 2013-10-26 04:43:53Z

1

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

answered Oct 26, 2013 at 4:43

N20084753

2,1702 gold badges17 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jerry Walker Over a year ago

thanks man. This is really what I was looking for. I'll study it enough until I can remember all the finer points. Writing html inside of the id is really what I wanted to know.

jfriend00 · Accepted Answer · 2013-10-26 04:43:51Z

1

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/

edited Oct 26, 2013 at 4:43

answered Oct 26, 2013 at 4:38

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

2 Comments

Jerry Walker Over a year ago

Hey thanks, only reason I didn't pick yours for top answer was because, me being kind of a noob, the code was a tad more abstract. Also, I was looking for radio button choices. I didn't specify that though so sorry. Thanks though man this helps a lot as well. :)

jfriend00 Over a year ago

@JerryWalker - I hope you can learn from both of them. Studying other people's code is a great way to learn.

Collectives™ on Stack Overflow

Looping through array using a button

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related