Reusable function JS

Question

I have functions which after clicking on the button sorts the elements. On the website, I have several buttons which are responsible for sorting different elements. My function looks like this

 const sort = () => {
     var list = document.querySelector('.list');


     console.log([...list.children]);
     [...list.children]
       .sort((a,b)=>a.querySelector('.video-count').innerText.replace(/,/g, '') - b.querySelector('.video-count').innerText.replace(/,/g, ''))
       .map(node=>list.appendChild(node))
    }


document.getElementById("video").addEventListener('click', sort);

And if I want to sort other elements, then in the above function I have to change only this element a.querySelector('.video-count') (add new class)

This is my HTML code

<ul class="list">
    <li class="channel-wrraper">
        <div class="channel-statistic">
            <div class="statistic-wrraper">
                <span class="statistic-name">subscribers:</span>
                <span class="subscirber-count">${subscriberCount}</span>
            </div>
            <div class="statistic-wrraper">
                <span class="statistic-name">videos:</span>
                <span class="video-count">${videoCount}</span>
            </div>
            <div class="statistic-wrraper">
                <span class="statistic-name">views:</span>
                <span class="veiw-count">${viewCount}</span>
            </div>
        </div>
    </li>
</ul>

How can I solve this problem?

Gabriele Petrioli · Accepted Answer · 2019-02-23 22:40:51Z

Use a function generator

const sort = (selector) => () => {
  var list = document.querySelector('.list');


  console.log([...list.children]);
  [...list.children]
  .sort((a, b) => a.querySelector(selector).innerText.replace(/,/g, '') - b.querySelector(selector).innerText.replace(/,/g, ''))
    .map(node => list.appendChild(node))
}


document.getElementById("sub").addEventListener('click', sort('.subscriber-count'));
document.getElementById("video").addEventListener('click', sort('.video-count'));
document.getElementById("view").addEventListener('click', sort('.view-count'));

.as-console-wrapper{max-height:2em!important;}

<ul class="list">
  <li class="channel-wrraper">
    <div class="channel-statistic">
      <div class="statistic-wrraper">
        <span class="statistic-name">subscribers:</span>
        <span class="subscriber-count">50</span>
      </div>
      <div class="statistic-wrraper">
        <span class="statistic-name">videos:</span>
        <span class="video-count">5</span>
      </div>
      <div class="statistic-wrraper">
        <span class="statistic-name">views:</span>
        <span class="view-count">1,000,000</span>
      </div>
    </div>
  </li>
  <li class="channel-wrraper">
    <div class="channel-statistic">
      <div class="statistic-wrraper">
        <span class="statistic-name">subscribers:</span>
        <span class="subscriber-count">5000</span>
      </div>
      <div class="statistic-wrraper">
        <span class="statistic-name">videos:</span>
        <span class="video-count">999</span>
      </div>
      <div class="statistic-wrraper">
        <span class="statistic-name">views:</span>
        <span class="view-count">500,000</span>
      </div>
    </div>
  </li>
</ul>

<button id="sub">subs</button>
<button id="video">videos</button>
<button id="view">views</button>

Collectives™ on Stack Overflow

Reusable function JS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related