sort div's through sort();

Question

I have list and this list must be sort to a => b throught like btn (example click SORT and we have list to a -> b)

<div class = "list">
<div id = "products"> Sugar </div>
<div id = "products"> Banana </div>
<div id = "products"> Apple </div>
</div>

sorted to for button =>

<div class = "list">
<div id = "products"> Apple </div>
<div id = "products"> Banana </div>
<div id = "products"> Sugar </div>
</div>

Idk how did that with like btn :(

I tried something like that =>

// For the HTML //

<button class = 'sortBtn' onclick = 'sort()'>Sort</button>

<script>

const sort  = document.quertSelector('.sortBtn');

sort.addEventListenet('click', function sort(a, b){
$parent.sort();
})

</script>

I would be grateful for help :) <3

[Validate your HTML](//validator.nu): duplicate IDs are invalid. `addEventListenet` doesn’t exist, and even if you meant [`addEventListener`](//developer.mozilla.org/en/docs/Web/API/EventTarget/addEventListener), there is no callback function that would accept _two_ arguments; the first one is always going to be an [`Event`](//developer.mozilla.org/en/docs/Web/API/Event); it will never be an Element. What does “a => b” or “a -> b” mean? If you want to sort lexicographically in an ascending order, then see [Sorting a list by data-attribute](/a/32199776/4642212) for a related example. — Sebastian Simon, Jan 17 '23 at 20:59
What is `$parent`? If it's a DOM element, they don't have a built-in `sort()` method. You need to write a function that sorts the divs. — Barmar, Jan 17 '23 at 21:00
Why does your `sort()` function take parameters `a` and `b` but not use them? You seem to be confusing the click event listener with the comparison function used with `Array.prototype.sort()`. — Barmar, Jan 17 '23 at 21:02
You can convert the children of a DIV to an array with `[...element.childElements]`. Then you can sort this. Finally, replace the contents of the parent with those elements. — Barmar, Jan 17 '23 at 21:04
Closing questions after x minutes is REALLY annoying! I cannot post my answer... But here is the code: https://jsfiddle.net/e321u9rj/. — Suboptimierer, Jan 17 '23 at 21:21

score 1 · Answer 1 · answered Jan 17 '23 at 21:06

There's a few issues in your code.

Typo: quertSelector -> querySelector
Typo: addEventListenet -> addEventListener
The repeated id in your HTML are invalid, convert them to class instead.
The function you provide to addEventListener should be anonymous in this case. Giving it a name here serves no purpose other than to waste bytes.
Avoid using inline event handlers, such as onclick, in your HTML code. It's outdated and no longer good practice. Use unobtrusive event handlers instead, such as addEventListener(), which you already use elsewhere in your code.
sort() should compare the a and b arguments and return an integer depending on which way to sort them. In this case, as you're comparing strings you can use localeCompare() on the textContent property of the elements.
After the sort() has completed you need to update the DOM to respect the new order of the elements. To do this you can call append() on the parent element, supplying the children as the argument.

Here's a working example with these issues addressed:

const sortButton = document.querySelector('.sortBtn');
const list = document.querySelector('.list');
const products = list.querySelectorAll('.products');

sortButton.addEventListener('click', () => {
  const sortedElements = Array.from(products).sort((a, b) => a.textContent.localeCompare(b.textContent));
  list.append(...sortedElements);
})

<div class="list">
  <div class="products">Sugar</div>
  <div class="products">Banana</div>
  <div class="products">Apple</div>
</div>
<button type="button" class="sortBtn">Sort</button>

score 0 · Answer 2 · answered Jan 17 '23 at 21:10

Convert the children of the parent element to an array. Then you can use the array sort() method to sort it, then append the children back to the parent in that order.

document.querySelector(".sortBtn").addEventListener("click", () => sortDiv(document.querySelector(".list")));

function sortDiv(parent) {
  let children = [...parent.children];
  children.sort((a, b) => a.innerText.localeCompare(b.innerText));
  parent.innerHTML = '';
  children.forEach(child => parent.appendChild(child));
}

<div class="list">
  <div class="products"> Sugar </div>
  <div class="products"> Banana </div>
  <div class="products"> Apple </div>
</div>

<button class='sortBtn'>Sort</button>

sort div's through sort();

2 Answers2

Linked