How do I increase the value of 'sessionStorage.fgattempt', every time 'fgMade()' or 'threeMade()' is triggered?

Question

So I am creating a stat tracker for a basketball game I play and I need that every time that I make a field goal or three pointer, that the field goal attempts go up as well. Also may need a way to shorten the javascript code I have written here.

Basically what is being asked is how to go about increasing the value of 'sessionStorage.fgattempt', for every time that both the functions 'fgMade()' and 'threeMade()' are run. It would also be nice to see that 'threeMade()' increases 'sessionStorage.threeattempt' as well.

user_8188060 · Answer

I'm assuming that this is the kind of thing you're looking for? FYI. This solution will still operate without having access to session storage, which in my opinion is nearly an essential part to include.

// A simple way to encapsulate the code into some object, 
// yet due to being a self invoked function, it still has the 
// luxury of 'private' properties. 
const App = function(myNameSpace) {
  let state = { // Initial app state.
    fgmade: 0,
    fgattempt: 0,
    threemade: 0,
    threeattempt: 0,
    block: 0,
    steal: 0,
    defrebound: 0,
    offRebound: 0,
    turnover: 0
  };


  // A simple method to load the state from session storage.
  const loadState = () => {
    try {
      if (sessionStorage.getItem("appState") != null) {
        state = JSON.parse(sessionStorage.getItem("appState"));
      }
    } catch (e) {
      // todo?
    }
  };


  // A simple state method to update the applciation state in session storage.
  const setState = () => {
    try {
      sessionStorage.setItem("appState", JSON.stringify(state));
    } catch (e) {
      // todo? 
    }
  };


  // A simple function to reste the state.
  const resetState = () => {
    Object.keys(state).forEach(k => state[k] = 0);
    setState();
    render();
  };


  // A VERY simple render method. 
  const render = () => {
    document.getElementById("result1").innerHTML = state.fgmade;
    document.getElementById("result2").innerHTML = state.fgattempt;
    document.getElementById("result3").innerHTML = state.threemade;
    document.getElementById("result4").innerHTML = state.threeattempt;
    document.getElementById("result5").innerHTML = state.block;
    document.getElementById("result6").innerHTML = state.steal;
    document.getElementById("result7").innerHTML = state.defrebound;
    document.getElementById("result8").innerHTML = state.offRebound;
    document.getElementById("result9").innerHTML = state.turnover;
  };


  // This is the 'bulk' of the code, where it works out which property to update.
  const buttonClickHandler = (e) => {
    const txt = e.target.textContent.replace(/\ /g, '').toUpperCase();

    switch (txt) {
      case 'FGM':
        updateProperty('fgmade');
        updateProperty('fgattempt');
        break;
      case 'FGA':
        updateProperty('fgattempt');
        break;
      case '3PM':
        updateProperty('threemade');
        updateProperty('fgattempt');
        updateProperty('threeattempt');
        break;
      case '3PA':
        updateProperty('threeattempt');
        break;
      case 'BLK':
        updateProperty('block');
        break;
      case 'STL':
        updateProperty('steal');
        break;
      case 'DREB':
        updateProperty('defrebound');
        break;
      case 'OREB':
        updateProperty('offRebound');
        break;
      case 'TO':
        updateProperty('turnover');
        break;
      default:
        resetState();
    }
  };


  // A simple function to update some data.
  const updateProperty = (key) => {
    state[key] += 1;
    setState();
    render();
  };


  // A function responsible for binding events to updates & whatnot. 
  const dispatchEvents = () => {
    document.querySelectorAll('button').forEach((button, index) => {
      button.setAttribute('data-index', index);
      button.addEventListener('click', buttonClickHandler);
    });
  };


  // Public method to state the app. 
  myNameSpace.launch = () => {
    loadState();
    render();
    dispatchEvents();
  };


  // Make sure to return the public object.
  return myNameSpace;
}({});


// Very lazy solution to document.ready.
setTimeout(App.launch, 250);

table,
th,
td {
  border: 1px solid black;
}

button#reset {
  background: red;
  border-color: red;
  color: white;
}

user_10669010 · Answer

My two cents..

    var
      basketball_scores_head = document.querySelector('#basketball-scores thead tr'),
      basketball_scores_body = document.querySelector('#basketball-scores tbody tr'),
      All_ScoreButton        = document.querySelectorAll('#basketball-scores  button'),
      Scores_Vals            = {},
      asStorage              = (typeof(Storage) !== "undefined");
    ;

    All_ScoreButton.forEach(bt_elm=>{
      let
        e_TH = document.createElement('th'),
        e_TD = document.createElement('td'),
        ref  = bt_elm.dataset.count.split(' ')[0]
        ;
      e_TH.textContent = ref;
      e_TD.textContent = "N/A";
      e_TD.id          = "count_"+ref;

      basketball_scores_head.appendChild(e_TH);
      basketball_scores_body.appendChild(e_TD);

      Scores_Vals[ref] = 0;

      bt_elm.onclick = IncreaseScore;
    });

    if (asStorage) {
      if ( sessionStorage.getItem('basketball_scores') )
      {
        Scores_Vals = JSON.parse( sessionStorage.getItem('basketball_scores'));
        for (let cnt in Scores_Vals ) {
          document.getElementById("count_"+cnt).textContent = Scores_Vals[cnt].toString();
        };
      } else {
        sessionStorage.setItem('basketball_scores',  JSON.stringify(Scores_Vals) );
      }
    }

    function IncreaseScore(e) {
      e.target.dataset.count.split(' ').forEach (cnt =>{
        Scores_Vals[cnt]++;
        document.getElementById("count_"+cnt).textContent = Scores_Vals[cnt].toString();
      });
      if (asStorage) {
        sessionStorage.setItem('basketball_scores',  JSON.stringify(Scores_Vals) );
      }
    }

      table#basketball-scores,
      table#basketball-scores th,
      table#basketball-scores td {
        border : 1px solid grey;
      }
      table#basketball-scores th,
      table#basketball-scores td {
        width  : 100px;
      }
      table#basketball-scores button {
        font-weight: bold;
        margin-top: 10px;
      }

How do I increase the value of 'sessionStorage.fgattempt', every time 'fgMade()' or 'threeMade()' is triggered?

2 Answers