JavaScript JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Useful Array Methods

Why won't my grocery list display when i type "list" i have to type exit for prompt to quit then view.

06:54 into the video he runs the code and the list will display behind prompt then he types quit to exit prompt. When i run the same code I it will not show until i type quit the grocery list shows , but if i add a "break" at the end of the else if statement it works? var inStock = [ 'apples', 'eggs', 'milk', 'cookies', 'cheese', 'bread', 'lettuce', 'carrot', 'broccoli', 'pizza', 'potato', 'crackers', 'onion', 'tofu', 'frozen dinner', 'cucumber']; var search;

function print(message) { document.write( '<p>' + message + '</p>'); }

while (true) { search = prompt("Search the product in the store. Type 'list' to show al of the products in the stock and 'break' to exit" ); if (search === 'quit'){ break;

}else if (search === 'list'){ print(inStock.join(', ')); break; } }

4 Answers

andren
andren
28,384 Points

This is explained in the teacher's notes of the video:

Since this video was shot, the behavior of most browsers has changed, so you won't see the same thing as I demonstrate in the video. In the video, you'll see that my script is able to print out to the browser using document.write( ) while inside a loop.

Most browsers no longer do that: they wait until the loop finishes and then they print to the window. So, you'll see a blank page until you type quit in the prompt window — then you'll see all the output printed to the screen.

Sorry for the confusion, and we'll update the video soon.

Wow first time i have gotten a response from the actual person in the video. This is the first question i have had for you guys good to know you guys have a responsive team . Thanks for the help.

danielperez
danielperez
Full Stack JavaScript Techdegree Student 15,991 Points
// one solution : remove while loop, use the if-else statement by itself
// main change : if statement tests for  'list' first, then print list
// then inner if-else tests for inStock.indexof matching or not, 
// final else simply prints 'thanks for shopping' 

// tested this code on macOS 10.13.2 and latest versions Safari and Chrome

// array of items in stock

var inStock = [ 'apples', 'eggs', 'milk', 'cookies', 'cheese', 'bread', 'lettuce', 'carrot', 'broccoli', 'pizza', 'potato', 'crackers', 'onion', 'tofu', 'frozen dinner', 'cucumber'];

// empty search variable, to store, indexOf. Use this to test against inStock list 

var search;

// added, thankForShopping, string variable 
// used it to give the final else 'quit' something to do
// and then print this after each either list or search result also

var thanksForShopping = 'Thanks for Shopping. Please come, again';

function print(message) {
  document.write( '<p><strong>' + message + '</strong></p>');
}

search = prompt("Search for a product in our store. Type 'list' to show all of the produce and 'quit' to exit");
search = search.toLowerCase();

if ( search === 'list' ) {
    print( inStock.join(',  ') );
  } else if (search !== 'quit') {
    if ( inStock.indexOf( search ) > -1 ) {
      print( 'Yes, we have ' + search + ' in the store.');
      print(thanksForShopping);

    } else {
      print( search + ' is not in stock.');
      print(thanksForShopping);

    }
  } else {
    print(thanksForShopping);
  }

// commmented out the while-loop
/* while (true) {
  search = prompt("Search for a product in our store. Type 'list' to show all of the produce and 'quit' to exit");
  search = search.toLowerCase();
  if ( search === 'quit') {
    break;
  } else if ( search === 'list' ) {
    print( inStock.join(', ') ); 
  } else {
    if ( inStock.indexOf( search ) > -1 ) {
      print( 'Yes, we have ' + search + ' in the store.');
    } else {
      print( search + ' is not in stock.'); 
    }
  }
}
*/
Andrea Dinh
Andrea Dinh
4,946 Points

Hi, this might be a late contribution, but I had the same problem, and then I figured I could just put "break" after "print" like this: else if ( request === "list" ) { print( inStock.join(", ") ); break; }

Hope this helps

Jeffrey Libatique
Jeffrey Libatique
6,689 Points

Hi Andrea,

I did your suggestion and it worked.

Thanx a lot!

Saqib Ishfaq
Saqib Ishfaq
13,911 Points

Thanks andrea, just came across ur answer here, yes it helped by adding " break; " after "print". do u mean just on one occasion? coz as per teacher's notes, for browsers its not been working according to the code, adding "break; " after every "print" works just fine.

Jarom Denny
Jarom Denny
4,081 Points

If you write break after each print function you can only call one test at a time. The other option is to add an alert to the print function so you get real time responses. i.e. function print(message) { document.write( '<p>' + message + '</p>'); alert(message); }

alee2
alee2
4,101 Points

Thanks Andrea Dinh this works!

hope the video get updated soon.