Question

我正在关注Dash上的Mad Lib教程，但我遇到了以下问题：

每当我运行以下代码时，它应该将所有三个输入存储在数组answers中，但是，它不存储最后一个。每当我使用answers输出showFinal数组时，它会输出undefined，其中第三个答案应为。 Here是一个jsfiddle，输出同样的问题。

这是Javascript：

// List of prompts for the user
var prompts = [
    'Type your name',
    'Type an adjective',
    'Type a noun'
   ];

var answers = [];
// Keep track of current prompt we're on
var currentPrompt = 0;

// A function that will call the next prompt
var nextPrompt = function() {
    // if there is a next prompt
    if (currentPrompt < prompts.length) {
      if (currentPrompt != 0) {
        answers.push($('input').val());
      }
        // put first prompt in all html elements with class 
        $('.prompt').html(prompts[currentPrompt] + '<br><input type="text">');
        // move the next prompt into variable currentPrompt 
        currentPrompt = currentPrompt + 1;
    }
    //or else if we're at the end of the array
    else {
        // put a new message into the html.
        showFinal();
    }
}

var showFinal = function() {
  $('.prompt').html(answers[0]+ ' ' + answers[1] + ' ' + answers[2]);
}

// run nextPrompt function when button is clicked
$('button').click(function() {
    nextPrompt();
});

// Show the first prompt as soon as js loads
nextPrompt();

Answer 1

当您点击“下一步”时，问题就在于每一步。在保存当前值之前检查是否有更多提示消息。但如果没有进一步的提示消息，它会跳到showFinal（）

在检查是否有更多消息要提示

之前，您需要按当前值

if (currentPrompt != 0) {
        answers.push($('input').val());
    }
// if there is a next prompt
if (currentPrompt < prompts.length) {
        ....

更新小提琴：http://jsfiddle.net/w840jpac/1/

Answer 2

试试这个.. DEMO

// List of prompts for the user
var prompts = [
    'Type your name',
    'Type an adjective',
    'Type a noun'];

var answers = [];
// Keep track of current prompt we're on
var currentPrompt = 0;

// A function that will call the next prompt
var nextPrompt = function () {
    // if there is a next prompt
    if (currentPrompt <= prompts.length) {
        if (currentPrompt != 0) {
            console.log($('input').val()+'...');
            answers.push($('input').val());
        }
        // put first prompt in all html elements with class 
        if (currentPrompt != prompts.length) {
        $('.prompt').html(prompts[currentPrompt] + '<br><input type="text">');
        }else{
             showFinal();
        }
        // move the next prompt into variable currentPrompt 
        currentPrompt = currentPrompt + 1;
    }

}

var showFinal = function () {
    $('.prompt').html(answers[0] + ' ' + answers[1] + ' ' + answers[2]);
}

// run nextPrompt function when button is clicked
$('button').click(function () {
    nextPrompt();
});

// Show the first prompt as soon as js loads
nextPrompt();

Answer 3

试试这个：

// List of prompts for the user
var prompts = [
    'Type your name',
    'Type an adjective',
    'Type a noun'];

var answers = [];
// Keep track of current prompt we're on
var currentPrompt = 0;

// A function that will call the next prompt
var nextPrompt = function () {
    // if there is a next prompt
    if (currentPrompt > 0) {
            answers.push($('input').val());
    }

    if (currentPrompt < prompts.length) {        
        // put first prompt in all html elements with class 
        $('.prompt').html(prompts[currentPrompt] + '<br><input type="text">');
        // move the next prompt into variable currentPrompt 
        currentPrompt++;
    }
    //or else if we're at the end of the array
    else {
        // put a new message into the html.
        showFinal();
    }
}

var showFinal = function () {
    $('.prompt').html(answers[0] + ' ' + answers[1] + ' ' + answers[2]);
}

// run nextPrompt function when button is clicked
$('button').click(function () {
    nextPrompt();
});

// Show the first prompt as soon as js loads
nextPrompt();

我基本上在nextPrompt（）函数中进一步提升了这一部分：

if (currentPrompt > 0) {
    answers.push($('input').val());
}

编辑：

在回应评论时，我使用> 0只是因为它对我更有意义。使用!= 0，您隐含地暗示currentPrompt可能是小于零的值，例如-1。这是主观的，但无论哪种方式都适合你，这只是个人的事情：）

最后一个值未存储在Javascript变量中

3 个答案: