[英]Why won't my code display when I use Local Storage and JSON?
我正在开发一个项目,其中用户从 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,我认为问题在于:
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 命令之后出现的,所以我想知道这是否是问题所在。
谢谢!
此处提供的 HTML 和 Javascript 不完整,但我能想到的最可能的原因是您的 HTML 文档不包含以下 ID 的元素:
为了让示例运行,我必须添加这些以及 shuffle 方法和“showTeam”以及 qbselect2 和 qbselect3。 一旦我这样做了,它就起作用了,所以在我看来,您的控制台中可能存在与上述元素之一相关的错误,即在 display:none 之前停止执行 Javascript 方法。
编辑:对不起,是的,我还必须为中卫添加数据,并允许球队选择块最初可见并移除杂散支撑。 我认为您可能在尝试减少此示例的代码时损坏了代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.