我是编码和StockOverflow的初学者。这是我有史以来的第一篇文章，所以请原谅我的信息格式不正确，因为我只是一名高中生。关于这一点，我对下面的代码有疑问。只是一点点背景，该代码应该生成一个财富列表并附加每个财富，然后，当它遍历整个列表时，它将以随机顺序重新生成一个新的财富。 (请参阅下面的代码)在anotherFortune()期间发生了问题。当此函数重新运行generateFortuneCookie()达第二秒时，它似乎没有从fortunesList数组中提取任何值。它console.logs记录为“You will。”。另外，它不会重新生成第三个列表，谷歌浏览器会显示以下错误。
单击按钮约10次后。请注意，我还没有学习过jQuery，所以任何解决方案我都希望使用JavaScript解决方案。
以下JavaScript代码:
var fortunesList = ["die 2mrrw", "find a dollar", "become poor", "jump off a cliff", "turn into Batman"];
//if any fortunes are added to the list above, make sure to change "for loop" paramter one value (var i = " ";) and stats function at bottom
function generateFortuneCookie(){ //runs for the first time button is pressed
var cloneList = fortunesList.slice();
//randomizer for fortunes
var randomFortune = " ";
for (var i = 4; i >= 0; i--){
randomFortune = cloneList.splice(Math.floor(Math.random() * (i + 1)), 1); //(i + 1) ensures 5 values are returned since the last value in math.random is excluded
console.log("You will " + randomFortune + ".");
//temporarily stores random list
var tempCache = document.getElementById("fortune-cache");
var nodeone = document.createElement("DIV");
nodeone.innerText = "You will " + randomFortune + ".";
tempCache.appendChild(nodeone);
}
//changes button to prevent a new list of variables from being created
document.getElementById("first").style.display = "none";
document.getElementById("second").style.display = "block";
//appends last fortune from "fortune-cache" into "fortune-cookie-text"
var cookieText = document.getElementById("fortune-cookie-text");
var nodetwo = tempCache.lastChild;
cookieText.appendChild(nodetwo);
}
var count = 0;
var max = fortunesList.length;
//variables above pertain to the "count" function that reruns the "generateFortuneCookie()" function
var heightCount = 0;
//must be seperate and increase OUTSIDE of function, determines div height (dynamicDiv)
function anotherFortune(){ //this should run only after the first fortune is produce
var cookieText = document.getElementById("fortune-cookie-text"); //this variable MUST go before nodethree otherwise if declared after, nodethree won't recognize variable
//appends text from "fortune-cookie-text" to "previous-fortunes", this must be run first before adding new text from tempCache
var nodethree = document.createElement("LI");
nodethree.appendChild(cookieText.lastChild);
document.getElementById("previous-fortunes").appendChild(nodethree);
//button counter
count++
//console.log(count);
if(count == max){ //once it runs out of fortunes, it will regenerate a new list
generateFortuneCookie();
count = 0; //resets count back to zero
}
//this increases div height as list increases
var dynamicDiv = document.getElementById("other-fortunes-div");
var height = dynamicDiv.clientHeight;
heightCount++
//console.log(heightCount);
if(heightCount >= 2){
dynamicDiv.style.height = height + 1 + "px";
}
//appends text from "fortune-cache" into "fortune-cookie-text", runs after appending text into "previous-fortunes"
var tempCache = document.getElementById("fortune-cache");
var nodetwo = tempCache.lastChild;
cookieText.appendChild(nodetwo);
}
下面的HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>Fortune Cookie Gen</title>
<script type="text/javascript" src="./JS/app.js"></script>
<link rel="stylesheet" type="text/css" href="./CSS/styles.css">
<meta charset="utf-8">
</head>
<body>
<button onclick="generateFortuneCookie()" id="first">Make My Fortune!</button>
<button onclick="anotherFortune(); stats();" id="second">Generate Another Fortune!</button>
<div id="fortune-cache">
</div>
<div id="fortune-cookie-text">
<h3>Your Fortune</h3>
</div>
<div id="other-fortunes-div">
<h3>Previous Fortunes</h3>
<ul id="previous-fortunes">
</ul>
</div>
<div id="statistics">
<h3>Fortune Statistics</h3>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<div id="four">
</div>
<div id="five">
</div>
</div>
</body>
</html>
最佳答案
由于splice方法，您的fortunesList列表被“剪切”并删除其元素，因此，在第一次调用generateFortuneCookie()之后，将清空该数组。我的建议是您在generateFortuneCookie()的开头使用一个临时数组，并在每次调用generateFortuneCookie()时将fortunesList元素传递给该临时数组。
万一我的解释很烂，只需将这一行添加到generateFortuneCookie()
var tempList = fortunesList;
并将generateFortuneCookie()中的每个fortunesList引用替换为tempList。
或者，您可以使用
slice代替splice让我知道这是否对您有用。
更新
好的，我决定使用您的fortuneList的克隆列表，它似乎可以正常工作。
function generateFortuneCookie(){ //runs for the first time button is pressed
var cloneList = fortunesList.slice();
//randomizer for fortunes
var randomFortune = " ";
for (var i = 4; i >= 0; i--){
randomFortune = cloneList.splice(Math.floor(Math.random() * (i + 1)), 1); //(i + 1) ensures 5 values are returned since the last value in math.random is excluded
console.log("You will " + randomFortune + ".");
//temporarily stores random list
var tempCache = document.getElementById("fortune-cache");
var nodeone = document.createElement("DIV");
nodeone.innerText = "You will " + randomFortune + ".";
tempCache.appendChild(nodeone);
}
//changes button to prevent a new list of variables from being created
document.getElementById("first").style.display = "none";
document.getElementById("second").style.display = "block";
//appends last fortune from "fortune-cache" into "fortune-cookie-text"
var cookieText = document.getElementById("fortune-cookie-text");
var nodetwo = tempCache.lastChild;
cookieText.appendChild(nodetwo);
}