Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Abdi Ahmed
Abdi Ahmed
7,151 Points
Posted by Abdi Ahmed
Abdi Ahmed
7,151 Points

How to display elements from an array with button clicks

I have an array that contains 7 objects which are questions as follows: 

var questions = [ 
  {question: 'Which turkish club did former Leeds player Harry Kewell join in 2008, which caused an     uproar amongst Leeds supporters?'}, 
  {question: 'Who is the former Liverpool star who beat Ruud Van Nistelrooy\'s record of most prolific foreign  goalscorer in their debut in the Premier League?'},
  {question: 'Who scored Liverpool\'s winner in \'that\' first 4-3 game against Kevin Keegan\'s Newcastle United in April 1996?'},
  {question: 'Which club was former Leeds Unted player Eric Cantona sold to in 1992?'},
  {question: 'Which former Aston Villa and Ireland midfielder went on to become a regular TV pundit with ITV?'},
  {question: 'How many European Cups had Liverpool won up to and including 2007-8?'},
  {question: 'Name the Liverpool scorers for the \'miracle of Istanbul\'.'}
];

I would like to display each question when a button is clicked through the alert function. I need to just display the question that's already in the array. I don't want to ask the user for anything. So when the button is clicked I just want to pull out the first element and display that using alert(), then when the button is clicked again I want to display the second element until all of the elements have been displayed via clicking the button.

Thanks

2 Answers

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

Why not just set up the questions as a simple array?

Are you looking to do something like this (set up with jQuery for simplicity): JS Bin

var questions = [
  'Which turkish club did former Leeds player Harry Kewell join in 2008, which caused an uproar amongst Leeds supporters?', 
  'Who is the former Liverpool star who beat Ruud Van Nistelrooy\'s record of most prolific foreign  goalscorer in their debut in the Premier League?',
  'Who scored Liverpool\'s winner in \'that\' first 4-3 game against Kevin Keegan\'s Newcastle United in April 1996?',
  'Which club was former Leeds Unted player Eric Cantona sold to in 1992?',
  'Which former Aston Villa and Ireland midfielder went on to become a regular TV pundit with ITV?',
  'How many European Cups had Liverpool won up to and including 2007-8?',
  'Name the Liverpool scorers for the \'miracle of Istanbul\'.'
];

var questionsIndex = 0;
var ask = function () {
  alert((questionsIndex + 1) + " of " + questions.length + ": " + questions[questionsIndex]);
};

$('#question').on('click', function () {
  if (questionsIndex < questions.length) {
    ask();
    questionsIndex ++;
  } 
  // Reset after reaching the end
  else {
    questionsIndex = 0;
    ask();
    questionsIndex ++;
  }
});

To do it the way you have it set up originally, you'd just have to call the value of the question key for the question's array index: JS Bin #2

var questions = [ 
  {question: 'Which turkish club did former Leeds player Harry Kewell join in 2008, which caused an uproar amongst Leeds supporters?'}, 
  {question: 'Who is the former Liverpool star who beat Ruud Van Nistelrooy\'s record of most prolific foreign  goalscorer in their debut in the Premier League?'},
  {question: 'Who scored Liverpool\'s winner in \'that\' first 4-3 game against Kevin Keegan\'s Newcastle United in April 1996?'},
  {question: 'Which club was former Leeds Unted player Eric Cantona sold to in 1992?'},
  {question: 'Which former Aston Villa and Ireland midfielder went on to become a regular TV pundit with ITV?'},
  {question: 'How many European Cups had Liverpool won up to and including 2007-8?'},
  {question: 'Name the Liverpool scorers for the \'miracle of Istanbul\'.'}
];

var questionsIndex = 0;
var ask = function () {
  alert((questionsIndex + 1) + " of " + questions.length + ": " + questions[questionsIndex].question);
                                                                                        // ^ Add .question here
};

$('#question').on('click', function () {
  if (questionsIndex < questions.length) {
    ask();
    questionsIndex ++;
  }
  // Reset after reaching the end
  else {
    questionsIndex = 0;
    ask();
    questionsIndex ++;
    }
});
Abdi Ahmed
Abdi Ahmed
7,151 Points
Abdi Ahmed
Abdi Ahmed
7,151 Points

That's perfect Colin - exactly what I wanted to do!

Thanks