Last value not stored in Javascript variable

Question

I'm following the Mad Lib tutorial on Dash, but I run into the following problem:

Whenever I run the following code, it should store all three of my inputs in the array answers, however, it doesn't store the last one. Whenever I output the answers array with showFinal, it outputs undefined where the third answer should be. Here is a jsfiddle, outputting the same problem.

Here's the 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();

need to push the last input value before showFinal(). The prompts are at limit on last answer and they skip over pushing answer, but user just typed it — charlietfl
– charlietfl, Commented Sep 16, 2014 at 7:42

Alexandru Severin · Accepted Answer · 2014-09-16 07:43:44Z

1

The problem is at every step when you click 'Next' it check if there are more prompt messages before saving the current value. But if there are no further prompt messages it skips to showFinal()

You need to push the current value before checking if there are more messages to prompt

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

updated fiddle: http://jsfiddle.net/w840jpac/1/

answered Sep 16, 2014 at 7:43

Alexandru Severin

6,44812 gold badges54 silver badges79 bronze badges

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

1 Comment

Rvervuurt Over a year ago

Ah yes, I see I put the if (currentPrompt != 0) { in the wrong place. Weird that the system didn't pick it up as a mistake. Thanks!

Shashank · Accepted Answer · 2014-09-16 07:49:40Z

Try this..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();

Jason Evans · Accepted Answer · 2014-09-16 08:32:08Z

Try this:

// 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();

I basically moved this section further up in the nextPrompt() function:

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

EDIT:

In response to the comment, I use > 0 simply because it makes more sense to me. By using != 0 you are implicitly implying that currentPrompt could be a value less than zero e.g. -1. It's subjective, but either way will work for you, it's just a personal thing :)

You trying to trick me into asking more questions? :P It was currentPrompt != 0, not > ;)

Collectives™ on Stack Overflow

Last value not stored in Javascript variable

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related