how to add second click to the button plain javascript

Question

Can anyone tell me how to add another click to the button to sort the elements from 5 to 0?

first click: sort from 0 to 5 second click: sort from 5 to 0 third click: sort from 0 to 5 fourth click sort from 5 to 0 etc etc

 var card = document.querySelectorAll('.card'); var btn = document.querySelector('.btn') var container = document.querySelector(".container"); function getPrice(node) { return node.getAttribute('data-price'); } function compareCards(a, b) { return getPrice(a) > getPrice(b); } function append(node) { container.appendChild(node); } btn.addEventListener('click', function(){ container.innerHTML = ''; [...card].sort(compareCards).forEach(append); }); 

 body{ display:flex; justify-content:center; flex-wrap: wrap; } .container{ width: 100%; display: flex; justify-content: center; } .card{ width: 100px; height: 100px; float: left; display: flex; align-items: center; justify-content: center; font-size: 2em; color: #fff; text-shadow: 2px 2px 4px #000; } .red{ background: red; } .blue{ background: blue; } .pink{ background: pink; } .green{ background: green; } .purple{ background: purple; } .yellow{ background: yellow; } 

 <div class="container"> <div class="card purple" data-price=4>4</div> <div class="card pink" data-price=2>2</div> <div class="card red" data-price=0>0</div> <div class="card green" data-price=3>3</div> <div class="card yellow" data-price=5>5</div> <div class="card blue" data-price=1>1</div> </div> <button class="btn">click to sort</button> 

Answer 1

You could keep trace of your button state with a variable (Here ascOrder ) and use Array#reverse() half of the times :

 var card = document.querySelectorAll('.card'); var btn = document.querySelector('.btn') var container = document.querySelector(".container"); var ascOrder = true; function getPrice(node) { return node.getAttribute('data-price'); } function compareCards(a, b) { return getPrice(a) > getPrice(b); } function append(node) { container.appendChild(node); } btn.addEventListener('click', function(){ if(ascOrder){ ascOrder = false; container.innerHTML = ''; [...card].sort(compareCards).forEach(append); }else{ ascOrder = true; container.innerHTML = ''; [...card].sort(compareCards).reverse().forEach(append); } }); 

 body{ display:flex; justify-content:center; flex-wrap: wrap; } .container{ width: 100%; display: flex; justify-content: center; } .card{ width: 100px; height: 100px; float: left; display: flex; align-items: center; justify-content: center; font-size: 2em; color: #fff; text-shadow: 2px 2px 4px #000; } .red{ background: red; } .blue{ background: blue; } .pink{ background: pink; } .green{ background: green; } .purple{ background: purple; } .yellow{ background: yellow; } 

 <div class="container"> <div class="card purple" data-price=4>4</div> <div class="card pink" data-price=2>2</div> <div class="card red" data-price=0>0</div> <div class="card green" data-price=3>3</div> <div class="card yellow" data-price=5>5</div> <div class="card blue" data-price=1>1</div> </div> <button class="btn">click to sort</button> 

Answer 2

• Use a variable to change your sort direction.
• According to that flag, sort your array.

Look at this code snippet.

 var card = document.querySelectorAll('.card'); var btn = document.querySelector('.btn') var container = document.querySelector(".container"); var asc = false; function getPrice(node) { return node.getAttribute('data-price'); } function compareCards(a, b, asc) { if (asc) { return getPrice(a) > getPrice(b); } return getPrice(a) < getPrice(b); } function append(node) { container.appendChild(node); } btn.addEventListener('click', function(){ asc = !asc; container.innerHTML = ''; [...card].sort(function(a, b) { return compareCards(a, b, asc); }).forEach(append); }); 

 body{ display:flex; justify-content:center; flex-wrap: wrap; } .container{ width: 100%; display: flex; justify-content: center; } .card{ width: 100px; height: 100px; float: left; display: flex; align-items: center; justify-content: center; font-size: 2em; color: #fff; text-shadow: 2px 2px 4px #000; } .red{ background: red; } .blue{ background: blue; } .pink{ background: pink; } .green{ background: green; } .purple{ background: purple; } .yellow{ background: yellow; } 

 <div class="container"> <div class="card purple" data-price=4>4</div> <div class="card pink" data-price=2>2</div> <div class="card red" data-price=0>0</div> <div class="card green" data-price=3>3</div> <div class="card yellow" data-price=5>5</div> <div class="card blue" data-price=1>1</div> </div> <button class="btn">click to sort</button>