I am using this javascript to sort some divs based on the data in them. I changed from anchors to button but the script still doesn't work. When I click the buttons nothing happens. What am I doing wrong?

These are the buttons, they are placed above the Divs I want sorted

<li><button id="wager" type="button">Wager</button></li>
<li><button id="bonus" type="button">Bonus</button></li>
<li><button id="freespins" type="button">Freespins</button></li>

Here is the javascript I am trying to use in order to sort the divs.

 class Sort {
        constructor() {
      this.keys = {
        'wager': 'Wager',
        'bonus': 'Bonus',
          'freespins': 'Freespins'
      }
      /* Define HTML elements */
      // sort buttons
      this.btnWager = document.querySelector('button#wager');
      this.btnBonus = document.querySelector('button#bonus');
      this.btnFreespins = document.querySelector('button#freespins');
            
      // casino elements
      this.boxesEl = document.querySelector('#boxes');
      this.boxEl = document.querySelectorAll('.box');

      // array of all casinos
      this.box = [...this.boxEl];
            this.box.forEach(cc => {
        // get various data points from casino cards
        const bonus = Number(cc.querySelector(
          '.casin-bonus-info .sub-info:nth-child(2) .sub-info-content'
        ).innerText.match(/\d*/)[0]);
                          const freespins = Number(cc.querySelector(
          '.casin-bonus-info .sub-info:nth-child(3) .sub-info-content'
        ).innerText.match(/\d*/)[0]);
         const wager = Number(cc.querySelector(
          '.casin-bonus-info .sub-info:nth-child(4) .sub-info-content'
        ).innerText.match(/\d*/)[0]);

        
        // add data to casino cards
        cc.data = {        
          bonus,
          wager,
          freespins
        }
      })

      /* Add event listeners */
      // sort buttons
      this.btnBonus.addEventListener('click', this.sortCasinos);
      this.btnWager.addEventListener('click', this.sortCasinos);
      this.btnFreespins.addEventListener('click', this.sortCasinos);
            
             // Sort on load
      this.sortCasinos();
    }
    
    sortCasinos = (event=null, id=null) => {
      if (event !== null)
      {
        event.preventDefault();
        id = event.target.id;
      }

      // Default sorting algorithm
      if (id === null) id = "freespins";

      const sortKey = this.keys[id];
      
      this.boxesEl.innerHTML = '';
      this.sortBy(sortKey);
      this.box.forEach(cc => {
        this.boxesEl.appendChild(cc);
      })
    }
    
    sortBy = (sortKey) => {
      this.box.sort((a,b) => {
        if (sortKey === "wager") {
          if (a.data[sortKey] > b.data[sortKey]) return 1;
          if (a.data[sortKey] < b.data[sortKey]) return -1;  
        } else {
          if (a.data[sortKey] < b.data[sortKey]) return 1;
          if (a.data[sortKey] > b.data[sortKey]) return -1;
        }
        return 0;
      })
    }
}

window.onload = function() {
  const sort = new Sort();
}

This is is an example of one of the DIVs I would like to sort.

<div >
           <div >
              <div >
                  <a href="/til/casumo" title="Gå til Casumo" target="_blank"><img width="100" height="100" src="/wp-content/uploads/2022/03/Casumo-100x100.webp"  alt="Casumo" loading="lazy"></a>
              </div>
              <div >
                 <span ><a href="/casumo/" title="Casumo">Casumo</a></span>
                 <img  src="/images/50-stars.svg" alt="Stars Review">
              </div>
           </div>
           <div >
                          <span >Anbefalt casino</span>
                                   </div>
           <div >
              <div ><img src="/images/checkmark.svg" alt="Trekk" width="15px" height="24px">Max bet: 50kr</div>
              <div ><img src="/images/checkmark.svg" alt="Trekk" width="15px" height="24px">Enorm velkomst pakke</div>
              <div ><img src="/images/checkmark.svg" alt="Trekk" width="15px" height="24px">Meget stort utvalg</div>
              <div ><img src="/images/checkmark.svg" alt="Trekk" width="15px" height="24px">Brukervennlig design</div>
           </div>
           <div >
              <div >
                 <span >Prosent</span>
                 <span >100%</span>
              </div>
              <div >
                 <span >OPPTIL</span>
                 <span >5000kr</span>
              </div>
              <div >
                 <span >FREESPINS</span>
                 <span >100</span>
              </div>
              <div >
                 <span >WAGER</span>
                 <span >30x (d b)</span>
              </div>
           </div>
           <a a="" href="/til/casumo" title="Hent bonus fra Casumo" target="_blank" >Hent Bonus</a>
           <div >
              <a >Vis detaljer</a>
              <div >
                 <div >
                    <div >
                       <span > Innskuddsbonus: </span>
                       <div >
                           <span >Visa og Mastercard</span>
                 <span >Revolut</span>
                 <span >Neosurf og Astropay</span>
              </div>
           </div>
           <div >
              <span > Uttaksmetoder: </span>
              <div >
                 <span >Direkte bankoverføring</span>
                 <span >Direkte til Revolut</span>
                 <span >Neosurf og Astropay</span>
              </div>
           </div>
           <div >
              <span > Innskuddsbonus: </span>
              <div >
                 <span >Prosent: 100%</span>
                 <span >Bonus: 5000kr</span>
                 <span >Max bet: 50kr</span>
                       </div>
                    </div>
                 </div>
                 <div >
                    <p>Casumo har 100% opptil hele 5 000 kr, i tillegg til 100 freespins på Fire Joker! Her snakker vi highroller! Vi har testet casinoet og det er et kjempebra casino med stilrent design og god kundeservice.</p>
                 </div>
                 <div >
                    <span >Etablert år</span>
                    <span >2012</span>
                 </div>
                 <div >
                    <a href="https://kongebonus.wediadev.com/casumo/" title="Casumo anmeldelse">Casumo anmeldelse</a>
                 </div>
              </div>
           </div>
        </div>

CodePudding user response：

You should use button instead of links but if you really want to save your links you should add e.preventDefault();

But it really looks like you don’t need links...

CodePudding user response：

I managed to solve the problem. There was nothing really wrong with the script, just used capital letters in the wrong place. I also discovered that I can use anchors instead of buttons, but since buttons are the correct use here, I will keep them