Is there a way for me to increment the value of 'sessionStorage.fgattempt' whenever either 'fgMade()' or 'threeMade()' are called?

Question

Is there a way for me to increment the value of 'sessionStorage.fgattempt' whenever either 'fgMade()' or 'threeMade()' are called?

Currently, I am developing a basketball game stat tracker and need to update the field goal attempts every time I make a field goal or three-pointer. Additionally, I am looking for ways to optimize the javascript code provided.

The main requirement is to increment the value of 'sessionStorage.fgattempt' whenever both 'fgMade()' and 'threeMade()' functions are executed. It would also be helpful if the 'threeMade()' function also updated 'sessionStorage.threeattempt'.

<!DOCTYPE html>
<html>

<head>
  <script>
    // JavaScript functions here
  </script>
  <style>
    /* CSS styles here */
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>FGM</th>
        <th>FGA</th>
        <th>3PM</th>
        <th>3PA</th>
        <th>BLK</th>
        <th>STL</th>
        <th>DREB</th>
        <th>OREB</th>
        <th>TO</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div id="result1">N/A</div>
        </td>
        <td>
          <div id="result2">N/A</div>
        </td>
        <td>
          <div id="result3">N/A</div>
        </td>
        <td>
          <div id="result4">N/A</div>
        </td>
        <td>
          <div id="result5">N/A</div>
        </td>
        <td>
          <div id="result6">N/A</div>
        </td>
        <td>
          <div id="result7">N/A</div>
        </td>
        <td>
          <div id="result8">N/A</div>
        </td>
        <td>
          <div id="result9">N/A</div>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- Button elements with event listeners -->
</body>

</html>

javascript html css

Answer 1

Answer №1

It seems like this might be the solution you're seeking. Just a heads up, this code will function even without accessing session storage, which I believe is crucial to include.

// A straightforward way to encapsulate the code into an object
// While still maintaining 'private' properties due to being a self-invoked function.
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 application state in session storage
  const setState = () => {
    try {
      sessionStorage.setItem("appState", JSON.stringify(state));
    } catch (e) {
      // todo?
    }
  };


  // A simple function to reset 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.turnov...
      
// The bulk of the code determines which property to update
const buttonClickHandler = (e) => {
const txt = e.target.textContent.replace(/\ /g, '').toUpperCase();

switch (txt) {
case 'FGM':
updateProperty('fgmade');
updateProperty('fgattempt');
break;

...


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


// Very basic solution for document.ready
setTimeout(App.launch, 250);

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

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

<table>
<thead>
<tr>
<th>FGM</th>
<th>FGA</th>
<th>3PM</th>
<th>3PA</th>
<th>BLK</th>
<th>STL</th>
<th>DREB</th>
<th>OREB</th>
<th>TO</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="result1">N/A</div>
</td>
<td>
<div id="result2">N/A</div>
</td>
<td>
<div id="result3">N/A</div>
</td>
<td>
<div id="result4">N/A</div>
</td>
<td>
<div id="result5">N/A</div>
</td>
<td>
<div id="result6">N/A</div>
</td>
<td>
<div id="result7">N/A</div>
</td>
<td>
<div id="result8">N/A</div>
</td>
<td>
<div id="result9">N/A</div>
</td>
</tr>
</tbody>
</table>



<p><button>FGM</button></p>
<p><button>FGA</button></p>
<p><button>3PM</button></p>
<p><button>3PA</button></p>
<p><button>BLK</button></p>
<p><button>STL</button></p>
<p><button>DREB</button></p>
<p><button>OREB</button></p>
<p><button>TO</button></p>
<p><button id="reset">RESET</button></p>

Answer 2

It seems like this might be the solution you're seeking. Just a heads up, this code will function even without accessing session storage, which I believe is crucial to include.

// A straightforward way to encapsulate the code into an object
// While still maintaining 'private' properties due to being a self-invoked function.
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 application state in session storage
  const setState = () => {
    try {
      sessionStorage.setItem("appState", JSON.stringify(state));
    } catch (e) {
      // todo?
    }
  };


  // A simple function to reset 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.turnov...
      
// The bulk of the code determines which property to update
const buttonClickHandler = (e) => {
const txt = e.target.textContent.replace(/\ /g, '').toUpperCase();

switch (txt) {
case 'FGM':
updateProperty('fgmade');
updateProperty('fgattempt');
break;

...


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


// Very basic solution for document.ready
setTimeout(App.launch, 250);

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

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

<table>
<thead>
<tr>
<th>FGM</th>
<th>FGA</th>
<th>3PM</th>
<th>3PA</th>
<th>BLK</th>
<th>STL</th>
<th>DREB</th>
<th>OREB</th>
<th>TO</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="result1">N/A</div>
</td>
<td>
<div id="result2">N/A</div>
</td>
<td>
<div id="result3">N/A</div>
</td>
<td>
<div id="result4">N/A</div>
</td>
<td>
<div id="result5">N/A</div>
</td>
<td>
<div id="result6">N/A</div>
</td>
<td>
<div id="result7">N/A</div>
</td>
<td>
<div id="result8">N/A</div>
</td>
<td>
<div id="result9">N/A</div>
</td>
</tr>
</tbody>
</table>



<p><button>FGM</button></p>
<p><button>FGA</button></p>
<p><button>3PM</button></p>
<p><button>3PA</button></p>
<p><button>BLK</button></p>
<p><button>STL</button></p>
<p><button>DREB</button></p>
<p><button>OREB</button></p>
<p><button>TO</button></p>
<p><button id="reset">RESET</button></p>

Answer 3

Answer №2

Just my thoughts...

    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;
      }

<table id="basketball-scores">
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
  </tbody>
  <tfoot>
    <tr>
      <td><button data-count="FGM FGA">+</button></td>
      <td><button data-count="FGA">+</button></td>
      <td><button data-count="3PM FGA">+</button></td>
      <td><button data-count="3PA">+</button></td>
      <td><button data-count="BLK">+</button></td>  
      <td><button data-count="STL">+</button></td>
      <td><button data-count="DREB">+</button></td>
      <td><button data-count="OREB">+</button></td>
      <td><button data-count="TO">+</button></td>
    </tr>
  </tfoot>
</table>

Answer 4

Just my thoughts...

    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;
      }

<table id="basketball-scores">
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
  </tbody>
  <tfoot>
    <tr>
      <td><button data-count="FGM FGA">+</button></td>
      <td><button data-count="FGA">+</button></td>
      <td><button data-count="3PM FGA">+</button></td>
      <td><button data-count="3PA">+</button></td>
      <td><button data-count="BLK">+</button></td>  
      <td><button data-count="STL">+</button></td>
      <td><button data-count="DREB">+</button></td>
      <td><button data-count="OREB">+</button></td>
      <td><button data-count="TO">+</button></td>
    </tr>
  </tfoot>
</table>

Is there a way for me to increment the value of 'sessionStorage.fgattempt' whenever either 'fgMade()' or 'threeMade()' are called?

Answer №1

Answer №2

Similar questions

Reposition icons accordingly while incorporating a new set of icons

correcting mistakes in the design of the website

Is there a way to transfer a value set from one tpl file to another tpl file in cscart using smarty template engine?

When the textfield mui is set to shrink, an additional space appears in the label when using a font size of 12px

Using Jquery to loop through various select options within a designated container div

Angularjs does not seem to be rendering content placed within curly braces

Ajax external variable

Creating a personalized design for Bootstrap Badge

Incorrect media type linked to Gmail API attachment error

Is there a way to eliminate the additional and varying pseudo-padding on text inputs in both Webkit and Gecko browsers?

What is the best way to create non-standard text wrapping in HTML and CSS that is both semantic and sleek, avoiding square or circular shapes?

A guide on using jQuery to cycle through every row of every table on an HTML page

iPhone-compatible iFrame with adaptable webpage dimensions

Utilizing HTML5 Canvas for Shadow Effects with Gradients

Choosing multiple options in a select tag leads to an error

Enhancing Chat: Updating Chat Messages in Real-Time with Ember.js and Firebase

React Virtualized - Blank screen issue occurring because of continuous scrolling through a large list of ITSM items

Steps to utilize a PHP include for displaying HTML content corresponding to the URL file name

How can you conceal an HTML element when the user is using an iOS device?

Next.js experiencing development server compile errors and broken page routing in production builds