函数仅执行一次While循环

时间:2020-11-05 19:30:18

标签: javascript html

我感到困惑的是,为什么函数function calculateGroceries()仅执行函数中的第一个while循环while(itemName != SENTINEL)。我试图添加参数,以不允许对itemName作空答案。它在第一个while循环中一直很糟糕,并且不会继续到下一个while循环 while(isNaN(itemPrice) || itemPrice <= 0){const SENTINEL = "done';应该仅在提示您输入itemsName时才结束循环。到目前为止,行之有效。我知道它很小,但无法弄清楚。

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>

1 个答案:

答案 0 :(得分:1)

编辑:很抱歉,我最初无法正确理解您的问题。我现在有了,这是解决问题的方法:

问题: 问题在于,第一个while循环将继续执行n次,直到用户输入“ done”为止。但是您还希望获得输入的每个项目的项目价格,因此,当“项目名称”不为空时(即用户输入了一个值),您想立即要求该项目的价格,即因为您希望该价格被关联带有那个特定的物品。

因此,您的价格代码块也应位于第一个while循环内,而不是while循环外。检查我添加的其他条件。

如果您仍然有疑问,可以直接获取并运行此代码,尝试对其进行调试,以查看是否可以理解。

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;
    }
  }
}