Javascript 根据下拉选择中的值筛选输出_Javascript_Html

Javascript 根据下拉选择中的值筛选输出

javascript html

Javascript 根据下拉选择中的值筛选输出,javascript,html,Javascript,Html,为项目创建杂货店废物跟踪器。它输出一个对象字符串，每个对象都有一个过期日期。我正在检查日期（以毫秒为单位）是负数还是正数。如果为正，则函数返回true——它已过期。反之亦然。有一个下拉选择来筛选和显示：所有产品、过期产品和未过期产品。我无法使if语句正确显示基于下拉值的产品： function displayProducts() { var productOutput = document.getElementById("productOutput");

为项目创建杂货店废物跟踪器。它输出一个对象字符串，每个对象都有一个过期日期。我正在检查日期（以毫秒为单位）是负数还是正数。如果为正，则函数返回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();
                   }
                }
             }
          }

函数显示产品（）{
var productOutput=document.getElementById（“productOutput”）；
var filterProducts=document.getElementById（“sbProductsFilter”）；
productOutput.innerHTML=“”；
如果（filterProducts.value==“全部”）{
对于（i=0；i


完整的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>


杂货店废物跟踪器
库存

通过以下方式过滤产品：
全部的
期满
未到期

部门|产品|价格（$）|保质期
[在此处打印产品…]


废物计算器

按部门计算废物：
整店
面包店
乳品的
熟食店
产生
素食主义者

[选择一个部门]
//全局数组
var乘积=[]；
//一些产品
产品推送（新产品（“Avacados”，“Product”，8.99，新日期（“2019年6月27日”））；
产品推送（新产品（“法式面包”、“面包店”），5.99，新日期（“2019年7月30日”）；
产品推送（新产品（“牛肉”、“熟食”，14.99，新日期（“2019年4月1日”））；
产品推送（新产品（“梨”，“农产品”，5.50，新日期（“2019年4月2日”））；
产品推送（新产品（“2L巧克力牛奶”、“乳制品”，4.99，新日期（“2019年3月21日”））；
产品。推送（新产品（“南瓜饼”、“面包房”），10.50，新日期（“2019年3月13日”）；
产品推送（新产品（“葡萄”，“农产品”，6.99，新日期（“2018年2月1日”））；
产品推送（新产品（“面包”、“面包店”，5.99，新日期（“2019年3月30日”））；
产品推送（新产品（“切达奶酪”、“乳制品”，10.99，新日期（“2019年3月14日”））；
产品推送（新产品（“人造奶油”、“乳制品”，8.99，新日期（“2017年6月14日”））；
产品推送（新产品（“意大利腊肠”、“熟食”，5.99，新日期（“2019年3月13日”））；
产品推送（新产品（“橙子”，“农产品”，7.50，新日期（“2019年5月2日”））；
产品推送（新产品（“鸡肉”、“熟食”，21.99，新日期（“2019年3月22日”））；
产品推送（新产品（“土耳其”，“熟食”，14.99，新日期（“2019年4月3日”））；
产品推送（新产品（“辣椒”，“产品”，3.99，新日期（“2019年3月27日”））；
产品推送（新产品（“火腿”、“熟食”，9.99，新日期（“2019年5月5日”））；
产品推送（新产品（“巧克力蛋糕”、“面包店”，19.99，新日期（“2007年10月10日”）；//蛋糕是谎言！
产品推送（新产品（“10kg白面粉”，“面包房”，12.99，新日期（“2020年9月30日”））；
//TODO:构造函数函数和方法。。。
功能产品（名称、部门、价格、经验）{
this.productName=名称；
这个部门=部门；
这个价格=价格；
this.expireDate=exp；
this.isExpired=函数（）{
//var到期；
//当前时间-exp time=差异
//比较以毫秒为单位，如果为正值，则表示日期已过。
如果（Math.abs（Date.now（）-products[i].expireDate.getTime（），即使这是重复的，在您的情况下也可以这样做：

const e=document.querySelector（“#sbDepartmentFilter”）
const selectedValue=e.options[e.selectedIndex]
好的，我找到了为什么它不能像您期望的那样工作
1） 产品对象中的isExpired函数未按您的要求执行。请重试
this.isExpired=函数（）{
const today=新日期（）；
//请注意，您正在学习Math.Abs，它违背了减法的目的
如果（今天-this.expireDate<0）{
返回false；
}
否则{
返回true；
}
}

2） 产品中的outputString函数应该按产品执行，而不是针对所有产品
this.outputString=函数（）{
var输出=”；
输出+=
这个部门+“|”+
此.productName+“|”+
这个。价格+“|”；
if（this.isExpired（）==true）{
输出+=“过期”+“
”；
}
else if（this.isExpired（）==false）{
输出+=“未过期”+“
”；
}
返回输出；
}

3） 换你的d