Solution 1 :

Welcome to SO.

I’ve created a simple fiddle using your example: https://jsfiddle.net/Dganenco/vxja4kb1/ When I’ve tried to run your code, I received an error msg in console that says: Uncaught ReferenceError: soccer is not defined

Fix for your issue is straight-forward – add quotes!

<button onclick="sportExecute('soccer')" class="sportsModal-sport">Soccer</button>
      <button onclick="sportExecute('futsal')" class="sportsModal-sport">Futsal</button>
      <button onclick="sportExecute('basketball')" class="sportsModal-sport">Basketball</button>

Problem :

My idea is to hide some sections based on visitor sport. He would see a popup display when he enters the site for the first time. This popup has multiple buttons that should determine what content he will see further on. When he clicks on a button all the content with the selected sport would continue to be shown and all other sports content would hide. Also when data-sport=”all” the function should not hide this section affecting all the other sports.

I used a localStorage() for saving this setting in the device preventing the user to be click the preferred sport everytime. The js is supposed to be a loop for always have a localStorage() item “stSport” and when the device doesn’t have this item it launches the popup to capture the sport.

I’ve got this but it’s not working presuming that some little thing is wrong.
Could you help me out?

Thanks in advance! 🙂

HTML:

<section data-sport="soccer"></section>
<section data-sport="basketball"></section>
<section data-sport="all"></section>

<div id="sportsModal">
    <div id="sportsModal-group">
      <button onclick="sportRemove()" class="sportsModal-sport">All</button>
      <button onclick="sportExecute(soccer)" class="sportsModal-sport">Soccer</button>
      <button onclick="sportExecute(futsal)" class="sportsModal-sport">Futsal</button>
      <button onclick="sportExecute(basketball)" class="sportsModal-sport">Basketball</button>
      <button onclick="sportRemove()" class="sportsModal-sport">Other</button>
    </div>
</div>

CSS:

#sportsModal {
    background-color: rgba(255,255,255,0.15);
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    z-index: 99999;
    left: 0;
}

#sportsModal-group {
    display: flex;
    flex-direction: column;
}

.sportsModal-sport {
    margin-bottom: 10px;
}

JS:

function sportFunnel() {
  $("#sportModal").css("display", "fixed");
}

function sportExecute(n) {
  localStorage.removeItem("stSport");
  localStorage.setItem("stSport", n);
  var vstSports = localStorage.getItem("stSport");
  $("*[data-sport]").hide();
  var dataSport = "*[data-sport='" + vstSports + "']";
  var dataSportAll = "*[data-sport='all']";
  $(dataSportAll).show();
  $(dataSport).show();
}

$(document).ready( function() {
    if(!localStorage.getItem("stSport")){
        sportFunnel();
        var vstSports = localStorage.getItem("stSport");
    }
    else {
        var stSportChosen = localStorage.getItem("stSport"); 
        $("*[data-sport]").hide();
        var dataSport = "*[data-sport='" + stSportChosen + "']";
        var dataSportAll = "*[data-sport='all']";
        $(dataSportAll).show();
        $(dataSport).show();
    }
});

function sportRemove() {
  localStorage.removeItem("stSport");
  var vstSportsValue = localStorage.getItem("stSport");
  sportFunnel();
};

By

Leave a Reply

Your email address will not be published. Required fields are marked *