Sorting an array by using a button Sort

Question

So I am trying to sort an array of numbers when a user clicks on the button sort or reverse and my buttons names are #sort-cards and #reverse-cards. I feel like this is something very simple I am missing but I just cannot figure out what exactly.

(function () {
  var cardElements, cardValues; // Do not declare more variables here.

  // WRITE CODE HERE TO MAKE THE #cards ELEMENT WORK

  //Get an array of all div elements inside the #cards element.
  cardElements = Array.from(document.querySelectorAll('#cards div'));

  //Initialize the cardValues variable as an empty array.
  cardValues = [];

  //Use a forEach loop to iterate through each of the div elements (the cards) one by one.
  cardElements.forEach(function (cardElements) {
      //Generate a card value, a random integer between 1 and 99.
      cardElements.textContent = Math.floor(Math.random() * 99) + 1;

      //Push it onto the end of the cardValues array and put it in the current div element.
      cardValues.push(cardElements);

      //Create an event handler that moves the card to the right end whenever it is clicked, leaving the other cards in the same order, and outputs all the new card values to the card divs. 
      //cardElements.addEventListener('click', function() {

      //}

      //Do things when the sort button is clicked
      document.querySelector('#sort-cards').addEventListener('click', function () {
        cardElements.sort(function (a, b){
            return a - b;
        });
      });

      //Do things when the reverse button is clicked.
      document.querySelector('#reverse-cards').addEventListener('click', function () {
        cardElements.reverse();
      });
  });
}());

Answer 1

You are shadowing cardElements variable in the forEach callback. Also, add the event listeners once, not for every card. document.querySelectorAll('#cards div') returns a NodeList . If you want to change the DOM, you need to manipulate it, not the JS Array you made out of it.

You can iterate over NodeList s with for ... of .

In order to be DRY , I've added the renderCards function that mutates the DOM.

 (function () { var cardElements, cardValues; cardElements = document.querySelectorAll('#cards div'); cardValues = []; function renderCards(newCards) { for (let i = 0, max = cardElements.length; i < max; i++ ) { cardElements[i].textContent = newCards[i] } } for (let cardElement of cardElements){ cardElement.textContent = Math.floor(Math.random() * 99) + 1; cardValues.push(cardElement.textContent); }; document.querySelector('#sort-cards').addEventListener('click', function () { cardValues.sort(function (a, b){ return a - b; }); renderCards(cardValues); }); document.querySelector('#reverse-cards').addEventListener('click', function () { cardValues.reverse(); renderCards(cardValues); }); }());

 #cards { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; width: 100%; } .card { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin: 1em; padding: 1em; border: 1px solid #ccc; width: 2em; height: 2em; } #btns { margin: 1.6em; } .btn { cursor: pointer; background-color: lightgreen; padding: 1em; margin: 0 1.6em; }

 <div id="btns"> <a class="btn" role="btn" id="sort-cards">Sort cards</a> <a class="btn" role="btn" id="reverse-cards">Reverse cards</a> </div> <div id="cards"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> <div class="card">5</div> <div class="card">6</div> <div class="card">7</div> <div class="card">8</div> <div class="card">9</div> <div class="card">10</div> <div class="card">11</div> <div class="card">12</div> </div>