为什么我使用本地存储和 JSON 时我的代码不显示？答案

【问题标题】：Why won't my code display when I use Local Storage and JSON?为什么我使用本地存储和 JSON 时我的代码不显示？
【发布时间】：2020-11-14 20:22:27
【问题描述】：

我正在做一个项目，其中用户从 3 个随机选项中选择 1 个选项。总共有二十轮。我在一个文件上设置了“草稿”或选择，其中各轮被分成 div，当用户从第一轮中选择一个选项时，该轮消失并使用“显示：无”出现新一轮。我最近在文件中添加了 localStorage 命令，自从我这样做以来，代码不再成功地从一轮切换到另一轮。做出选择后，它会停留在同一轮中，并且“display:none”命令什么也不做。我应该怎么做？

这里是JS文件：

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

这是我认为问题所在的功能：

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

这是 HTML 文件：

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

让我知道出了什么问题。同样，问题是在我添加 localStorage 命令后出现的，所以我想知道这是否是问题所在。

谢谢！

【问题讨论】：

要清楚，您的工作代码正是这段代码减去包含localStorage的所有语句？您是否在控制台中遇到错误？使用browser console (dev tools)（点击F12）并阅读任何错误。您似乎只是在设置本地存储条目，但您是否也在代码中的某处读取它们？
我在另一个文件中阅读了它们。让我删除 localStorage 部分，看看它是否有效。
我还添加了表单，因此也可能存在问题。
你为什么有</input>s？在var qbData 之后有一个杂散的}，导致语法错误。 hbData 在哪里？为什么你的<input type="button" id="btn" value="Show Selected Value"> inside 是display: none; 块？无法单击该按钮。没有 ID 为 showTeam 的元素。同样，您遇到了什么错误？是什么阻止您调试失败的行？
即使没有 localStorage 部分，我也无法让代码工作。我遇到的问题是在选择后过渡到新一轮的部分，“document.getElementById("hbRound").style.display = "block", 不起作用。

标签： javascript html json random local-storage

【解决方案1】：

此处提供的 HTML 和 Javascript 不完整，但我能想到的最可能的原因是您的 HTML 文档不包含 ID 为：

总体
cumovr
qb团队

为了让示例运行，我必须添加这些以及 shuffle 方法和“showTeam”以及 qbselect2 和 qbselect3。一旦我这样做了，它就起作用了，所以在我看来，您的控制台中可能存在与上述元素之一相关的错误，即在达到 display:none 之前停止执行您的 Javascript 方法。

编辑：抱歉，是的，我还必须为中卫添加数据，让球队选择块最初可见并移除杂散支撑。我认为您可能在尝试减少此示例的代码时损坏了代码。

【讨论】：