Почему не работает сортировка на сайте при помощи js

Question

Объясните пожалуйста, как реализовать сортировку по цене на сайте? Пытался задать и через html и через onclick в js/addEventListener, но ничего не сработало, в чем проблема? Подскажите пожалуйста, как исправить данную проблему. HTML

    <!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <script src="script.js" defer></script>
   <title>Document</title>
</head>
<body>

<button class="sort" type="button" >Сортировка</button>

<div class="divi"></div>
</body>
</html>

Js

let shop =  {
       getTitle(){return 0},
       getPages(){return 0},
       getAuthor(){return 0},
       getPrice(){return 0},
       getSize(){return 0},
       getAge(){return 0},
       getWeight(){return 0},
       getName(){return 0}
    }
    
    class Book {
       constructor (title,pages,author,price) {
          this.title = title;
          this.pages = pages;
          this.author = author;
          this.price = price;
       }
    }
    
    Object.assign(Book.prototype, shop);
    Book.prototype.getTitle = function(){return this.title;}
    Book.prototype.getPages = function(){return this.pages;}
    Book.prototype.getAuthor = function(){return this.author;}
    Book.prototype.getPrice = function(){return this.price;}
    
    class Toy {
       constructor(name,price,age){
          this.name = name;
          this.price = price;
          this.age = age;
       }
    }
    
    Object.assign(Toy.prototype, shop);
    Toy.prototype.getPrice = function(){return this.price;}
    Toy.prototype.getAge = function(){return this.age;}
    Toy.prototype.getName = function(){return this.name;}
    
    class Fruit {
       constructor(name,price,weight){
          this.name = name;
          this.price = price;
          this.weight = weight;
       }
    }
    
    Object.assign(Fruit.prototype, shop);
    Fruit.prototype.getPrice = function(){return this.price;}
    Fruit.prototype.getWeight = function(){return this.weight;}
    Fruit.prototype.getName = function(){return this.name;}
    
    let listBook = [];
    let listToy = [];
    let listFruit = [];
    
    listBook.push(new Book('книга 1', 101, 'Пушкин',401));
    listBook.push(new Book('книга 2', 102, 'Пушкин',402));
    listBook.push(new Book('книга 3', 103, 'Пушкин',403));
    listBook.push(new Book('книга 4', 104, 'Пушкин',404));
    
    listToy.push(new Toy('игрушка 1', 101,501));
    listToy.push(new Toy('игрушка 2', 102,502));
    listToy.push(new Toy('игрушка 3', 103,503));
    listToy.push(new Toy('игрушка 4', 104,504));
    
    listFruit.push(new Fruit('фрукт 1', 181,1));
    listFruit.push(new Fruit('фрукт 2', 182,2));
    listFruit.push(new Fruit('фрукт 3', 183,3));
    listFruit.push(new Fruit('фрукт 4', 184,4));
    
    
    let sorts = document.querySelector('.sort');
    
    sorts.addEventListener('click' , sorters);
    
    function sorters(){
    listBook.sort((a,b)=> b.getPrice() - a.getPrice());//сортировка нужно добавить кнопку! от меньшего к большему
    }
    
    
    let divi = document.querySelector('.divi');
    
    for (bodyBook of listBook){
    let newDiv = document.createElement('div');
    let newDivText = document.createElement('div');
    let newDivPrice = document.createElement('div');
    newDivText.textContent += bodyBook.title;
    newDivPrice.textContent += bodyBook.price;
    newDiv.classList.add('newBook');
    newDivText.classList.add('newBookText');
    newDivPrice.classList.add('newBookPrice');
    divi.append(newDiv);
    newDiv.append(newDivText);
    newDiv.append(newDivPrice); 
    };

Answer 1

Применяя функцию сортировки к списку не значит, что она автоматом перестроит HTML. Поэтому после каждой манипуляции с массивом надо перерисовывать HTML:

let shop = {
  getTitle() { return 0; },
  getPages() { return 0; },
  getAuthor() { return 0; },
  getPrice() { return 0; },
  getSize() { return 0; },
  getAge() { return 0; },
  getWeight() { return 0; },
  getName() { return 0; }
}

class Book {
  constructor(title, pages, author, price) {
    this.title = title;
    this.pages = pages;
    this.author = author;
    this.price = price;
  }
}

Object.assign(Book.prototype, shop);
Book.prototype.getTitle = function() {
  return this.title;
}
Book.prototype.getPages = function() {
  return this.pages;
}
Book.prototype.getAuthor = function() {
  return this.author;
}
Book.prototype.getPrice = function() {
  return this.price;
}

class Toy {
  constructor(name, price, age) {
    this.name = name;
    this.price = price;
    this.age = age;
  }
}

Object.assign(Toy.prototype, shop);
Toy.prototype.getPrice = function() {
  return this.price;
}
Toy.prototype.getAge = function() {
  return this.age;
}
Toy.prototype.getName = function() {
  return this.name;
}

class Fruit {
  constructor(name, price, weight) {
    this.name = name;
    this.price = price;
    this.weight = weight;
  }
}

Object.assign(Fruit.prototype, shop);
Fruit.prototype.getPrice = function() {
  return this.price;
}
Fruit.prototype.getWeight = function() {
  return this.weight;
}
Fruit.prototype.getName = function() {
  return this.name;
}

let listBook = [];
let listToy = [];
let listFruit = [];

listBook.push(new Book('книга 1', 101, 'Пушкин', 401));
listBook.push(new Book('книга 2', 102, 'Пушкин', 402));
listBook.push(new Book('книга 3', 103, 'Пушкин', 403));
listBook.push(new Book('книга 4', 104, 'Пушкин', 404));

listToy.push(new Toy('игрушка 1', 101, 501));
listToy.push(new Toy('игрушка 2', 102, 502));
listToy.push(new Toy('игрушка 3', 103, 503));
listToy.push(new Toy('игрушка 4', 104, 504));

listFruit.push(new Fruit('фрукт 1', 181, 1));
listFruit.push(new Fruit('фрукт 2', 182, 2));
listFruit.push(new Fruit('фрукт 3', 183, 3));
listFruit.push(new Fruit('фрукт 4', 184, 4));


let sorts = document.querySelector('.sort');

function sorters() {
  listBook.sort((a, b) => b.getPrice() - a.getPrice()); //сортировка нужно добавить кнопку! от меньшего к большему
  
}

let sortAndRebuild = () => {
    sorters();
    buildBookList(listBook);
};


let buildBookList = (listBook) => {
    let divi = document.querySelector('.divi');
    divi.innerHTML = '';
    
    for (bodyBook of listBook) {
      let newDiv = document.createElement('div');
      let newDivText = document.createElement('div');
      let newDivPrice = document.createElement('div');
      newDivText.textContent += bodyBook.title;
      newDivPrice.textContent += bodyBook.price;
      newDiv.classList.add('newBook');
      newDivText.classList.add('newBookText');
      newDivPrice.classList.add('newBookPrice');
      divi.append(newDiv);
      newDiv.append(newDivText);
      newDiv.append(newDivPrice);
    };
};

sorts.addEventListener('click', sortAndRebuild);
buildBookList(listBook);

<button class="sort" type="button">Сортировка</button>

<div class="divi"></div>

БЛОГ НА HUSL

Почему не работает сортировка на сайте при помощи js

Ответы (1 шт):