Javascript 我不知道如何创建一个函数来按价格排序，并打印成HTML（替换）

我的任务是：创建一类商品

名字

价格

描述

摄影

及 创建一个按钮，单击按价格排序并打印成HTML（div id=“products”）

按价格分类

我创建了一个包含商品的类：

class Products {
    constructor(name,price,description,img){
        this.name = name;
        this.price = price;
        this.description = description;
        this.img = img;
    }
};

var nike = new Products("Nike", 100, "shoes","img/nike.png");
var adidas = new Products("Adidas", 120, "classic-shoes","img/adidas.png");
var puma = new Products("Puma",200,"new-shoes","img/puma.png");
var jordan = new Products("Jordan", 170, "outlet-shoes", "img/jordan.png");

var arrGoods = [nike,adidas,puma,jordan];

and push into HTML

function addGoods(item){
    for (let i = 0; i<arrGoods.length; i++){
            document.getElementById("products").innerHTML += `<div class="info-goods">
            <div class="img"><img src=${item[i].img}></div>
            <div class="name">${item[i].name}</div>
            <div class="price">${item[i].price}</div>
            <div class="description">${item[i].description}</div>
           </div>`
        }
}

addGoods(arrGoods);

类产品{
建造商（名称、价格、说明、img）{
this.name=名称；
这个价格=价格；
this.description=描述；
this.img=img；
}
};
var nike=新产品（“nike”，100，“shoes”，“img/nike.png”）；
var阿迪达斯=新产品（“阿迪达斯”，120，“经典鞋”，“img/adidas.png”）；
var puma=新产品（“puma”，200，“新鞋”，“img/puma.png”）；
var jordan=新产品（“jordan”，170，“outlet shoes”，“img/jordan.png”）；
var arrGoods=[耐克、阿迪达斯、彪马、约旦]；
并推入HTML
功能添加商品（项目）{
对于（让i=0；i在将值放入数组后运行sort方法）

class Products {
        constructor(name,price,description,img){
            this.name = name;
            this.price = price;
            this.description = description;
            this.img = img;
        }
    };
    function sortByPrise(arr) {
        arr.sort(function(a,b){
            return a.price - b.price;
        })
        console.log(arr);
    }



    var nike = new Products("Nike", 100, "shoes","img/nike.png");
    var adidas = new Products("Adidas", 120, "classic-shoes","img/adidas.png");
    var puma = new Products("Puma",200,"new-shoes","img/puma.png");
    var jordan = new Products("Jordan", 170, "outlet-shoes", "img/jordan.png");

    var arrGoods = [nike,adidas,puma,jordan];

     sortByPrise(arrGoods);



    function addGoods(item){
        for (let i = 0; i<item.length; i++){
                document.getElementById("products").innerHTML += `<div class="info-goods">
                <div class="img"><img src=${item[i].img}></div>
                <div class="name">${item[i].name}</div>
                <div class="price">${item[i].price}</div>
                <div class="description">${item[i].description}</div>
               </div>`
            }
    }

    addGoods(arrGoods);

类产品{
建造商（名称、价格、说明、img）{
this.name=名称；
这个价格=价格；
this.description=描述；
this.img=img；
}
};
功能排序基序（arr）{
arr.sort（函数（a，b）{
返回a.价格-b.价格；
})
控制台日志（arr）；
}
var nike=新产品（“nike”，100，“shoes”，“img/nike.png”）；
var阿迪达斯=新产品（“阿迪达斯”，120，“经典鞋”，“img/adidas.png”）；
var puma=新产品（“puma”，200，“新鞋”，“img/puma.png”）；
var jordan=新产品（“jordan”，170，“outlet shoes”，“img/jordan.png”）；
var arrGoods=[耐克、阿迪达斯、彪马、约旦]；
货物分类（货物）；
功能添加商品（项目）{
对于（设i=0；i您需要在填充数组之后和调用
addGoods
之前进行排序。请完全按照您使用的方式发布代码。当前结果是什么？您可以看到div，但按原始顺序排列吗？您的函数sortByPrise，不返回任何内容，您必须在内部返回结果
class Products {
        constructor(name,price,description,img){
            this.name = name;
            this.price = price;
            this.description = description;
            this.img = img;
        }
    };
    function sortByPrise(arr) {
        arr.sort(function(a,b){
            return a.price - b.price;
        })
        console.log(arr);
    }



    var nike = new Products("Nike", 100, "shoes","img/nike.png");
    var adidas = new Products("Adidas", 120, "classic-shoes","img/adidas.png");
    var puma = new Products("Puma",200,"new-shoes","img/puma.png");
    var jordan = new Products("Jordan", 170, "outlet-shoes", "img/jordan.png");

    var arrGoods = [nike,adidas,puma,jordan];

     sortByPrise(arrGoods);



    function addGoods(item){
        for (let i = 0; i<item.length; i++){
                document.getElementById("products").innerHTML += `<div class="info-goods">
                <div class="img"><img src=${item[i].img}></div>
                <div class="name">${item[i].name}</div>
                <div class="price">${item[i].price}</div>
                <div class="description">${item[i].description}</div>
               </div>`
            }
    }

    addGoods(arrGoods);