How does the array in the function block work?

Question

var question;
var userGuess;
var answer;
var correct = 0;
var wrong = 0;
var html;
var correctQuestions = [];
var wrongQuestions = [];

//QUESTIONS
var QuestionAndAnswer = [ 
["What is the capital of Great Britain?" , "LONDON"],
["Which member left the boyband One Direction to pursue a solo career?" , "ZAYN MALIK"],
["What team won the Premier League in the 2016-17 season?" , "CHELSEA"]
]

 //CODE FOR LOOPING QUESTIONS      
for (i = 0; i < QuestionAndAnswer.length; i+=1) { 
  question  = QuestionAndAnswer [i] [0];
  answer = QuestionAndAnswer [i] [1];
  userGuess = prompt(question);
  //userguess = userGuess.toUpperCase();
  if (userGuess.toUpperCase() === answer) {
    correct +=1;
    correctQuestions.push(question);
  } else {
   wrongQuestions.push(question); 
   wrong +=1;
  }
}

//PRINT
function htmlblock(arr) {
 var olHTML = "<ol>";
 for (var i = 0; i < arr.length; i+=1) {
   olHTML+= "<li>" + arr[i] + "</li>";
 }
   olHTML+= "</ol>";
   return olHTML;
 }

function print(message) {
  var outputDiv = document.getElementById("output");
  outputDiv.innerHTML = message;
};

html = "You got " + correct + " right!.";
html += "<h2> You got these questions right:</h2> ";
html += htmlblock(correctQuestions);
html += "You got " + wrong + " wrong!.";
html += "<h2>These are the questions you got wrong:</h2>";
html += htmlblock(wrongQuestions);

html = print(html);

Underneath ///print, i am really confused on how this works:

//PRINT
function htmlblock(arr) {
 var olHTML = "<ol>";
 for (var i = 0; i < arr.length; i+=1) {
   olHTML+= "<li>" + arr[i] + "</li>";
 }
   olHTML+= "</ol>";
   return olHTML;
 }

How does the (arr) work and for the arr[i], what is that doing? At the end when concluding what questions i got right and wrong, how does function work to get the results? im especially confused with the (arr) and "arr[i]".

Thank you very much!

Answer 1 · 2017-10-04T21:58:18Z

October 4, 2017 9:58pm

Let's start with this bit:

function htmlblock(arr) {

We're creating a function that takes one argument/parameter. It will be named arr inside the function but its value will be whatever we pass in when we call it.. Later when we call the function to execute the code:

html += htmlblock(correctQuestions);
//...
html += htmlblock(wrongQuestions);

We call it two different times. Once with the array of questions we got right, and a second time with the array of questions we got wrong. Another way to look at it is we execute the code in htmlblock() with arr = correctQuestions and later execute the code with arr = wrongQuestions.

Answer 2 · 2017-10-04T21:51:23Z

October 4, 2017 9:51pm

// create a function that receives and array as parameter
function htmlblock(arr) {
 // create a variable to start a <ol> element 
 var olHTML = "<ol>";
  // create a for loop to go thru each of the elements in the array passed in (arr)
  for (var i = 0; i < arr.length; i+=1) {
    olHTML+= "<li>" + arr[i] + "</li>"; // for each iteration append to the olHTML variable
  }
 olHTML+= "</ol>"; // append the closing tag 
 return olHTML; // return the variable olHTML
 }

Basically the function takes in an array of elements, creates a ordered list and polulates the list with each one of the elements in the array. Once it looped thru all the elements in the array, it returns the variable containing the HTML ordered list. If you are having trouble understanding arr[i] I would suggest you spend some more time on the topic, get some hands-on practice, understanding arrays is an important topic in development. Cheers

Welcome to the Treehouse Community

Looking to learn something new?

martin wong

martin wong

How does the array in the function block work?

2 Answers

Seth Kroger

Seth Kroger

Martin Zarate

Martin Zarate