vendredi 24 juillet 2020

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

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!




Aucun commentaire:

Enregistrer un commentaire