Question

为项目创建杂货店废物跟踪器。它输出一串对象，每个对象都有一个截止日期。我正在检查日期（以毫秒为单位）是负数还是正数。如果为正，则该函数返回true －它已过期。反之亦然。有一个下拉选项可以过滤和显示：所有产品，过期产品和未过期产品。我无法获得正确的if语句来根据下拉值显示产品：

 function displayProducts() {
             var productOutput = document.getElementById("productOutput");
             var filterProducts = document.getElementById("sbProductsFilter");

             productOutput.innerHTML = "";

             if (filterProducts.value == "All") {
                for (i = 0; i < products.length; i++) {
                   productOutput.innerHTML = products[i].outputString();
                }
             }

             if (filterProducts.value == "Expired") {
                for (i = 0; i < products.length; i++) {
                   if (products[i].isExpired() == true) {
                      console.log("hello");
                      productOutput.innerHTML = products[i].outputString();
                   }
                }
             }

             if (filterProducts.value == "Not Expired") {
                for (i = 0; i < products.length; i++) {
                   if (products[i].isExpired() == false) {
                      console.log("hello");
                      productOutput.innerHTML = products[i].outputString();
                   }
                }
             }
          }

完整的HTML和JS：

<body onload="displayProducts();">

   <h1>Grocery Store Waste Tracker</h1>

   <!-- Inventory -->
   <fieldset>
      <legend>Store Inventory</legend>
      <form>
         <!-- Filter-->
         <p>
            Filter Products By:
            <select id="sbProductsFilter" onchange="displayProducts();">
               <option selected>All</option>
               <option>Expired</option>
               <option>Not Expired</option>
            </select>
         </p>

         <!-- Products Output -->
         <span><strong>Department | Product | Price ($) | Shelf Life</strong></span>
         <div id="productOutput">[Print Products here...]</div>
      </form>
   </fieldset>
   <br>

   <!-- Waste Calculator -->
   <fieldset>
      <legend>Waste Calculator</legend>
      <form>
         <!-- Filter -->
         <p>
            Calculate Waste By Department:
            <select id="sbDepartmentFilter" onchange="calculateWaste();">
               <option selected>Entire Store</option>
               <option>Bakery</option>
               <option>Dairy</option>
               <option>Deli</option>
               <option>Produce</option>
               <option>Vegan</option>
            </select>
         </p>

         <!-- Products Output -->
         <div id="wasteOutput">[Select a department]</div>
      </form>
   </fieldset>

   <script>


      // Global array
      var products = [];

      // Some products
      products.push(new Product("Avacados", "Produce", 8.99, new Date("June 27, 2019")));
      products.push(new Product("Baguette", "Bakery", 5.99, new Date("July 30, 2019")));
      products.push(new Product("Beef", "Deli", 14.99, new Date("April 1, 2019")));
      products.push(new Product("Pears", "Produce", 5.50, new Date("April 2, 2019")));
      products.push(new Product("2L Chocolate Milk", "Dairy", 4.99, new Date("March 21, 2019")));
      products.push(new Product("Pumpkin Pie", "Bakery", 10.50, new Date("March 13, 2019")));
      products.push(new Product("Grapes", "Produce", 6.99, new Date("February 1, 2018")));
      products.push(new Product("Loaf of Bread", "Bakery", 5.99, new Date("March 30, 2019")));
      products.push(new Product("Cheddar Cheese", "Dairy", 10.99, new Date("March 14, 2019")));
      products.push(new Product("Margarine", "Dairy", 8.99, new Date("June 14, 2017")));
      products.push(new Product("Salami", "Deli", 5.99, new Date("March 13, 2019")));
      products.push(new Product("Oranges", "Produce", 7.50, new Date("May 2, 2019")));
      products.push(new Product("Chicken", "Deli", 21.99, new Date("March 22, 2019")));
      products.push(new Product("Turkey", "Deli", 14.99, new Date("April 3, 2019")));
      products.push(new Product("Peppers", "Produce", 3.99, new Date("March 27, 2019")));
      products.push(new Product("Ham", "Deli", 9.99, new Date("May 5, 2019")));
      products.push(new Product("Chocolate Cake", "Bakery", 19.99, new Date("October 10, 2007"))); // The Cake is a Lie!
      products.push(new Product("10kg White Flour", "Bakery", 12.99, new Date("September 30, 2020")));

      // TODO: Constructor function and methods...
      function Product(name, dept, price, exp) {
         this.productName = name;
         this.department = dept;
         this.price = price;
         this.expireDate = exp;

         this.isExpired = function () {
            //var expired;
            //current time - exp time = difference 
            // compares in milliseconds, if positive value, date has passed.
            if (Math.abs(Date.now() - products[i].expireDate.getTime() <= 0)) {
               return false;
            }
            else {
               return true;
            }
         }

         this.outputString = function () {
            var output = "";
            for (i = 0; i < products.length; i++) {
               output +=
                  products[i].department + " | " +
                  products[i].productName + " | " +
                  products[i].price + " | ";

               if (this.isExpired() == true) {
                  output += "Expired" + "</br>";
               }
               else if (this.isExpired() == false) {
                  output += "Not Expired" + "</br>";
               }
            }
            return output;
         }
      }

      // TODO: displayProducts() function... 
      function displayProducts() {
         var productOutput = document.getElementById("productOutput");
         var filterProducts = document.getElementById("sbProductsFilter");

         productOutput.innerHTML = "";

         if (filterProducts.value == "All") {
            for (i = 0; i < products.length; i++) {
               productOutput.innerHTML = products[i].outputString();
            }
         }

         if (filterProducts.value == "Expired") {
            for (i = 0; i < products.length; i++) {
               if (products[i].isExpired() == true) {
                  console.log("hello");
                  productOutput.innerHTML = products[i].outputString();
               }
            }
         }

         if (filterProducts.value == "Not Expired") {
            for (i = 0; i < products.length; i++) {
               if (products[i].isExpired() == false) {
                  console.log("hello");
                  productOutput.innerHTML = products[i].outputString();
               }
            }
         }
      }


    // TODO: Calculate Waste Function




   </script>
</body>

Answer 1

好的，我发现了为什么它无法按您期望的那样工作。

1）您的Product对象中的isExpired函数没有执行您想要的操作。尝试

 this.isExpired = function () {
             const today = new Date();
             // notice that you were taking Math.Abs which defeats the purpose of the subtraction
             if ( today - this.expireDate < 0 ) {
                return false;
             }
             else {
                return true;
             }
          }

2）您产品中的outputString函数应该针对每个产品而不是针对所有产品进行操作。

 this.outputString = function () {
                var output = "";

                output +=
                   this.department + " | " +
                   this.productName + " | " +
                   this.price + " | ";

                if (this.isExpired() == true) {
                   output += "Expired" + "</br>";
                }
                else if (this.isExpired() == false) {
                   output += "Not Expired" + "</br>";
                }

             return output;
          }

3）更改displayProducts函数以附加到productOutput.innerHTML，您将看到一切正常。

作为参考，这就是我为displayProducts方法提供的

function displayProducts() {
          var productOutput = document.getElementById("productOutput");
          var filterProducts = document.getElementById("sbProductsFilter");

          productOutput.innerHTML = "";

          if (filterProducts.value == "All") {
             for (i = 0; i < products.length; i++) {
                productOutput.innerHTML += products[i].outputString();
             }
          }

          if (filterProducts.value == "Expired") {
             for (i = 0; i < products.length; i++) {
                if (products[i].isExpired() == true) {
                   console.log("hello");
                   productOutput.innerHTML += products[i].outputString();
                }
             }
          }

          if (filterProducts.value == "Not Expired") {
             for (i = 0; i < products.length; i++) {
                if (products[i].isExpired() == false) {
                   console.log("hello");
                   productOutput.innerHTML += products[i].outputString();
                }
             }
          }
       }

有关完整的工作示例，请参见https://codepen.io/nbuss848/pen/MWYWWzo。

Answer 2

即使这是重复的，也可以按照情况进行操作：

const e = document.querySelector('#sbDepartmentFilter')
const selectedValue = e.options[e.selectedIndex]

根据下拉列表中的值过滤输出

2 个答案: