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

Enhance the visual appeal of Autodesk Forge Viewer by incorporating environmental textures

Is there a way to verify if a user taps outside a component in react-native?

What are some best practices for integrating CSS grid layouts with React for optimal results?

Is it possible for me to alter the script for my button's onclick

Tips for successfully retrieving a variable from a function triggered by onreadystatechange=function()

What is the best way to update and override multiple nested NPM dependencies with various versions?

Launch a new window for a div when a button is clicked

react-i18next - The function call does not match any overload when the specified type is `string`

Node and Web scraping Promise: a powerful combination

Utilizing jQuery to manage asynchronous tasks, such as executing AJAX requests, handling promises, and using deferred

The operation of my NodeJS application suddenly halts

Error encountered in NodeJS after refreshing the node server

Tips on updating route and content dynamically without triggering a page reload while ensuring search engine indexing compatibility

How to Target a Specific Element Using its Class with jQuery

What are the best practices for effectively utilizing the nodejs Stream API?

What is the preferred method for writing `*zoom: 1;` in CSS?

The problem with clearing floats in IE7 (as well as 6)

Can someone show me how to implement RequestPromise in TypeScript?

Having problems with loading @font-face in Ionic Framework Android app build?

Load image in index.html for use on a different webpage