CODEWITHSUNDEEP
javascripthtml
Gary Kukat
Gary Kukat

Reputation: 79

Function Only Performs One While Loop

I am confused as why the function function calculateGroceries() only performs the first while loop while(itemName != SENTINEL) in the function. I tried to add parameters to not allow a blank answer to itemName. It is stays suck in the first while loop and doesn't continue to the next while loop while(isNaN(itemPrice) || itemPrice <= 0){. The const SENTINEL = "done'; is supposed to end the loop only when prompted for the itemsName as well. So far that works. I know its something small but can't figure it out.

function calculateGroceries() {

  const SENTINEL = "done";

  let itemName = "none";
  let itemPrice = 0;
  let itemTotal = 0;
  let itemValues = 0;
  let list = document.getElementById("list");
  let total = document.getElementById("total");

  //while loop to not allow blank responses//
  while (itemName != SENTINEL) {
    itemName = prompt("Enter the item's name or " + SENTINEL + " to stop.");

    if (itemName == "") {
      alert("Field can't be blank. Enter item's name or " + SENTINEL + " to stop.")
    }
  }
  //while loop to not allow negative numbers or strings//
  while (isNaN(itemPrice) || itemPrice <= 0) {
    itemPrice = prompt("Enter the item's price.");
    itemPrice = parseFloat(itemPrice);

    if (itemPrice < 0) {
      alert("The number is less than 0. Enter a positive number")
    }
    if (isNaN(itemPrice)) {
      alert("You have to enter a number. Enter a number free of other characters.")
    }
    if (itemName != SENTINEL) {
      itemTotal += itemPrice;
      itemValues++;

      let li = document.createElement("li");
      li.innerHTML = itemName

      list.appendChild(li);
      total.innerHTML = itemTotal;
    }
  }

}

<body>
  <h1> Grocery Shopping List </h1>
  <p>
    <form name="myForm">
      <!--prompts user for item name/price and calculates the total-->
      <button type="button" onclick="calculateGroceries();">Click here to enter the grocery list </button>
      <ul id="list"></ul>
      <div> Total: <span id="total"></span></div>
  </p>
</body>

Upvotes: 0

Views: 67

Answers (1)

theonly1me
theonly1me

Reputation: 1248

Edit: I am sorry, I initially did not understand your question properly. I now have and here is how you can fix your problem:

Problem: The problem is that the first while loop will continue to execute 'n' number of times until the user enters 'done'. But you want to also get the item price for each item that is entered, therefore, when Item Name is not empty i.e user entered a value you want to ask for the price immediately for that item, i.e because you want that price to be associated with that particular item.

Therefore, your price code block should also be located inside the first while loop, not outside the while loop. Check the else condition that I have added.

You can directly take and run this code, try to debug it and see if you can understand, in case you still have ant doubt, feel free to comment.

function calculateGroceries() {
  const SENTINEL = 'done';

  let itemName = 'none';
  let itemPrice = 0;
  let itemTotal = 0;
  let itemValues = 0;
  let list = document.getElementById('list');
  let total = document.getElementById('total');

  //while loop to not allow blank responses//
  while (itemName !== SENTINEL) {
    itemName = prompt("Enter the item's name or " + SENTINEL + ' to stop.');

    if (itemName == '') {
      alert(
        "Field can't be blank. Enter item's name or " + SENTINEL + ' to stop.'
      );
    } else {
      //while loop to not allow negative numbers or strings//
    
      //you only want to ask for the price when the item name is not 'done' so we have this condition below
      if (itemName !== SENTINEL) 
        itemPrice = Number.parseFloat(prompt("Enter the item's price."));

      while (isNaN(itemPrice) || itemPrice <= 0) {
        if (itemPrice < 0) {
          alert('The number is less than 0. Enter a positive number');
        }
        if (isNaN(itemPrice)) {
          alert(
            'You have to enter a number. Enter a number free of other characters.'
          );
        }
        itemPrice = Number.parseFloat(prompt("Enter the item's price."));
      }

      itemTotal += itemPrice;
      itemValues++;

      let li;
      //only add item name to UI when it is not 'done'
      if (itemName !== SENTINEL) {
        li = document.createElement('li');
        li.innerHTML = itemName;
      }

      list.appendChild(li);
      total.innerHTML = itemTotal;
    }
  }
}

Upvotes: 1

Related Questions