Как отобразить элемент из массива с петлей

Question

У меня есть массив, который содержит 7 объектов, которые являются вопросами следующим образом:

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\'.'} 
]; 

Я хотел бы, чтобы отобразить каждый вопрос с помощью цикла, когда кнопка нажата через оповещения. Мне нужно просто отобразить вопрос, который уже находится в массиве. Я не хочу никого спрашивать у пользователя. Поэтому, когда нажата кнопка, я просто хочу вытащить первый элемент и отобразить его с помощью alert(), а затем, когда кнопка снова нажата, я хочу отобразить второй элемент, пока все элементы не будут показаны с помощью кнопки.

В качестве примера я попытался использовать onlick свойство кнопки вместе с цикл, чтобы попытаться получить этот вопрос, чтобы отобразить следующим образом здесь JSFiddle:

но это отображает все вопросы в массив одним щелчком мыши.

Благодаря

Answer 1

Вам не нужна петля для этого. Все, что вам нужно, это переменная, которая отслеживает, сколько раз была нажата кнопка (или волшебный однострочный, как ответ, предоставленный @naomik).

var timesClicked = 0; 

В вашем методе onClick():

var answer = prompt(questions[timesClicked]); // ask user a question, store the answer 
if(timesClicked < questions.length) 
    timesClicked++; 
else // optionally you can reset the counter after all the questions have been answered 
    timesClicked = 0; 

Answer 2

Наверное не совсем то, что вы хотите, но вот начало

var answers = questions.map(function(q) { return prompt(q.question); }); 

После того как все вопросы были даны ответы, вы можете увидеть ответы

console.log(answers); 

Answer 3

Самый простой способ для этого необходимо использовать счетчик:

var questions = .... 
var counter = 0; 
function onButtonClick(){ 
    alert(questions[counter]['question']); 
} 

Вы можете упростить ситуацию, просто используя массив строк вместо массива объектов, содержащих строки.

var questions = ['question1', 'question2'...]; 
var counter = 0; 
function onButtonClick(){ 
    alert(questions[counter]); 
} 

Вы можете использовать командную строку, если вы хотите, чтобы пользователь, чтобы дать вам ответы:

var questions = ['question1', 'question2'...]; 
var answers = new Array(); 
var counter = 0; 
function onButtonClick(){ 
    answers.push(prompt(questions[counter++]['question'])); 
} 

Answer 4

http://jsfiddle.net/vjvkvjas/2/

Вы можете экспериментировать с чем-то вроде

var answers=[]; 
btn.addEventListener('click',function(){ 
    if(questions.length){ 
    answers.push(prompt(questions.pop().question)); 
    } 
}); 

Это компактное решение без подсчета переменных. Вместо pop, shift также возможно.