TransWikia.com

Why won't my code display when I use Local Storage and JSON?

Stack Overflow Asked by Jack Gordon on January 5, 2022

I am working on a project in which a user selects 1 choice from 3 random options. There are twenty total rounds of this. I set the "draft" or selection up on one file, where the rounds are separated into divs and when the user picks an option from the first round, then that round disappears and a new round appears using "display:none." I recently added localStorage commands to the file, and ever since I did this, the code no longer successfully switches from round to round. When a selection is made, it stays on the same round and the "display:none" command does nothing. What should I do differently?

Here is the JS file:

var qbData = [{name: 'Patrick Mahomes', team: 'KC', overall: 99},{name: 'Lamar Jackson', team: 'BAL', overall: 97},{name: 'Russell Wilson', team: 'SEA', overall: 98},{name: 'Deshaun Watson', team: 'HOU', overall: 95},{name: 'Drew Brees', team: 'NO', overall: 95},{name: 'Aaron Rodgers', team: 'GB', overall: 92},{name: 'Ryan Tannehill', team: 'TEN', overall: 92},{name: 'Kyler Murray', team: 'ARI', overall: 90},{name: 'Carson Wentz', team: 'PHI', overall: 88},{name: 'Matt Ryan', team: 'ATL', overall: 86},{name: 'Dak Prescott', team: 'DAL', overall: 86},{name: 'Philip Rivers', team: 'IND', overall: 86},{name: 'Tom Brady', team: 'TB', overall: 86},{name: 'Ben Roethlisberger', team: 'PIT', overall: 86},{name: 'Josh Allen', team: 'BUF', overall: 85},{name: 'Matthew Stafford', team: 'DET', overall: 84},{name: 'Kirk Cousins', team: 'MIN', overall: 84},{name: 'Cam Newton', team: 'FA', overall: 83},{name: 'Jared Goff', team: 'LAR', overall: 82},{name: 'Sam Darnold', team: 'NYJ', overall: 82},{name: 'Derek Carr', team: 'LV', overall: 82},{name: 'Jimmy Garoppolo', team: 'SF', overall: 82},{name: 'Ryan Fitzpatrick', team: 'MIA', overall: 81},{name: 'Daniel Jones', team: 'NYG', overall: 80},{name: 'Drew Lock', team: 'DEN', overall: 80},{name: 'Gardner MINSHEW', team: 'JAC', overall: 80},{name: 'Dwayne Haskins', team: 'WAS', overall: 80},{name: 'Baker Mayfield', team: 'CLE', overall: 79},{name: 'Jameis Winston', team: 'NO', overall: 79},{name: 'Jarrett Stidham', team: 'NE', overall: 79},{name: 'Justin Herbert', team: 'LAC', overall: 78},{name: 'Mitch Trubisky', team: 'CHI', overall: 77},{name: 'Nick Foles', team: 'CHI', overall: 76},{name: 'Andy Dalton', team: 'DAL', overall: 76},{name: 'Mason Rudolph', team: 'PIT', overall: 74},{name: 'David Blough', team: 'DET', overall: 73},{name: 'Devlin Hodges', team: 'PIT', overall: 73},{name: 'Will Grier', team: 'CAR', overall: 72}];

}
let qbshuffled = shuffle([...qbData]);
let hbshuffled = shuffle([...hbData]);

const btn = document.querySelector('#btn');
// handle click button
btn.onclick = function () {
    const rbs = document.querySelectorAll('input[name="teamName"]');
    let selectedValue;
    for (const rb of rbs) {
        if (rb.checked) {
            selectedValue = rb.value;
            break;
        }
    }
    document.getElementById("teamSelection").style.display = "none";
    document.getElementById("qbRound").style.display = "block";
    document.getElementById("showTeam").style.display = "block";
    localStorage.setItem('teamName', JSON.stringify(selectedValue));
};

for (let display of document.querySelectorAll(".qbdisplay")) {
    let {name, team, overall} = qbshuffled.pop();
    display.innerHTML = name + ' ' + team + ' ' + overall;
}
for (let display of document.querySelectorAll(".hbdisplay")) {
    let {name, team, overall} = hbshuffled.pop();
    display.innerHTML = name + ' ' + team + ' ' + overall;
}

This is the function that I think the issue lies in:

function qbSelect1 () {
  var qbValue = document.getElementById("qb1").innerHTML;
  var qbSplit = qbValue.split(" ");
  var qbName = qbSplit[0] + " " + qbSplit[1];
  document.getElementById("overall").style.display = "block";
  document.getElementById("overall").innerHTML = qbSplit[3];
  document.getElementById("cumovr").innerHTML = qbSplit[3];
  alert("You have selected " + qbName);
  document.getElementById("qbTeam").innerHTML = qbName;
  document.getElementById("qbRound").style.display = "none";
  localStorage.setItem('qbName', JSON.stringify(qbName));
  localStorage.setItem('qbTeam', JSON.stringify(qbSplit[2]));
  localStorage.setItem('qbOverall', JSON.stringify(qbSplit[3]));
  document.getElementById("hbRound").style.display = "block";
  }

And this is the HTML File:

<div id="teamSelection" style = "display:none;">
  <h1> Select a Team </h1>
  <form id="teamPick" onsubmit="submitTeamName()">
    <input type="radio" name="teamName" id="NYG" value="New York Giants">
    <label for="NYG">New York Giants </label><br>
    <input type="radio" name="teamName" id="ARI" value="Arizona Cardinals">
    <label for="ARI">Arizona Cardinals </label><br>
    <input type="radio" name="teamName" id="ATL" value="Atlanta Falcons">
    <label for="ATL">Atlanta Falcons </label><br>
    <input type="radio" name="teamName" id="BAL" value="Baltimore Ravens">
    <label for="BAL">Baltimore Ravens </label><br>
    <input type="radio" name="teamName" id="BUF" value="Buffalo Bills">
    <label for="BUF">Buffalo Bills </label><br>
    <input type="radio" name="teamName" id="CAR" value="Carolina Panthers">
    <label for="CAR">Carolina Panthers </label><br>
    <input type="radio" name="teamName" id="CIN" value="Cincinnati Bengals">
    <label for="CIN">Cincinnati Bengals </label><br>
    <input type="radio" name="teamName" id="CHI" value="Chicago Bears">
    <label for="CHI">Chicago Bears </label><br>
    <input type="radio" name="teamName" id="CLE" value="Cleveland Browns">
    <label for="CLE">Cleveland Browns </label><br>
    <input type="radio" name="teamName" id="DAL" value="Dallas Cowboys">
    <label for="DAL">Dallas Cowboys </label><br>
    <input type="radio" name="teamName" id="DEN" value="Denver Broncos">
    <label for="DEN">Denver Broncos </label><br>
    <input type="radio" name="teamName" id="DET" value="Detroit Lions">
    <label for="DET">Detroit Lions </label><br>
    <input type="radio" name="teamName" id="GB" value="Green Bay Packers">
    <label for="GB">Green Bay Packers </label><br>
    <input type="radio" name="teamName" id="HOU" value="Houston Texans">
    <label for="HOU">Houston Texans </label><br>
    <input type="radio" name="teamName" id="IND" value="Indianapolis Colts">
    <label for="IND">Indianapolis Colts </label><br>
    <input type="radio" name="teamName" id="JAG" value="Jacksonville Jaguars">
    <label for="JAG">Jacksonville Jaguars </label><br>
    <input type="radio" name="teamName" id="KC" value="Kansas City Chiefs">
    <label for="KC">Kansas City Chiefs </label><br>
    <input type="radio" name="teamName" id="LAC" value="Los Angeles Chargers">
    <label for="LAC">Los Angeles Chargers </label><br>
    <input type="radio" name="teamName" id="LAR" value="Los Angeles Rams">
    <label for="LAR">Los Angeles Rams </label><br>
    <input type="radio" name="teamName" id="MIA" value="Miami Dolphins">
    <label for="MIA">Miami Dolphins </label><br>
    <input type="radio" name="teamName" id="MIN" value="Minnesota Vikings">
    <label for="MIN">Minnesota Vikings </label><br>
    <input type="radio" name="teamName" id="NE" value="New England Patriots">
    <label for="NE">New England Patriots </label><br>
    <input type="radio" name="teamName" id="NO" value="New Orleans Saints">
    <label for="NO">New Orleans Saints </label><br>
    <input type="radio" name="teamName" id="NYJ" value="New York Jets">
    <label for="NYJ">New York Jets </label><br>
    <input type="radio" name="teamName" id="OAK" value="Las Vegas Raiders">
    <label for="OAK">Las Vegas Raiders </label><br>
    <input type="radio" name="teamName" id="PHI" value="Phladelphia Eagles">
    <label for="PHI">Phladelphia Eagles </label><br>
    <input type="radio" name="teamName" id="PIT" value="Pittsburgh Steelers">
    <label for="PIT">Pittsburgh Steelers </label><br>
    <input type="radio" name="teamName" id="SF" value="San Fransisco 49ers">
    <label for="SF">San Fransisco 49ers </label><br>
    <input type="radio" name="teamName" id="SEA" value="San Fransisco 49ers">
    <label for="SEA">Seattle Seahawks</label><br>
    <input type="radio" name="teamName" id="TB" value="Tampa Bay Buccanneers">
    <label for="TB">Tampa Bay Buccanneers</label><br>
    <input type="radio" name="teamName" id="TEN" value="Tennessee Titans">
    <label for="TEN">Tennessee Titans</label><br>
    <input type="radio" name="teamName" id="WAS" value="Washington Redskins">
    <label for="WAS">Washington Redskins</label><br>
    <input type="button" id="btn" value="Show Selected Value">
  </form>
</div>



<div id = "qbRound" style = "display:none">
    <h4> Quarterback Round </h4> <br>
<input type = "radio"  name = "qb" value = "qb1" onclick = "qbSelect1()"></input>
<label id = "qb1" class = "qbdisplay"></label><br>
<input type = "radio"  name = "qb" value = "qb2" onclick = "qbSelect2()"></input>
<label id = "qb2" class = "qbdisplay"></label><br>
<input type = "radio"  name = "qb" value = "qb3" onclick = "qbSelect3()"></input>
<label id = "qb3" class = "qbdisplay"></label><br>
</div>

<div id = "hbRound" style = "display:none">
<h4> Runningback Round </h4> <br>
<input type = "radio"  name = "hb" value = "hb1" onclick = "hbSelect1()"></input>
<label id = "hb1" class = "hbdisplay"></label><br>
<input type = "radio"  name = "hb" value = "hb2" onclick = "hbSelect2()"></input>
<label id = "hb2" class = "hbdisplay"></label><br>
<input type = "radio"  name = "hb" value = "hb3" onclick = "hbSelect3()"></input>
<label id = "hb3" class = "hbdisplay"></label><br>
</div>

Let me know what is wrong. Again, the problem originated after I added in localStorage commands, so I wonder if that is the problem.

Thanks!

One Answer

The HTML and the Javascript provided here are incomplete, but the most likely cause I can think of is if your HTML document didn't contain elements with the IDs of:

  • overall
  • cumovr
  • qbTeam

I had to add these as well as as a shuffle method and "showTeam" and qbselect2 and qbselect3 in order to get the example to run. Once I did that, it worked, so it seems to me that you probably have errors in your console relating to one of the elements above, which is stopping the execution of your Javascript method BEFORE the display:none is reached.

EDIT: Sorry, yes I also had to add a the data for the half-backs and allow the team selection block to be initially visible and remove the stray brace. I think you may have damaged the code in trying to reduce it for this example.

Answered by Justin Otto on January 5, 2022

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP