【发布时间】：2016-12-21 06:59:22
【问题描述】：
我是编码和 StockOverflow 的初学者。这是我的第一篇文章，如果我的文章格式不正确，请原谅，因为我只是一名初中生。然而，在那张纸条上，我对下面的代码有疑问。只是一点背景，这段代码应该生成一个财富列表并附加每个财富，然后一旦它遍历整个列表，它就会以随机顺序重新生成一个新的。 （参考下面的代码）问题发生在anotherFortune()。当此函数重新运行generateFortuneCookie() 时，它似乎第二次没有从 fortunesList 数组中提取任何值。它 console.logs 为，“你会的。”此外，它不会重新生成第三个列表，谷歌浏览器会给出以下错误。
app.js:33 Uncaught TypeError: 无法在“Node”上执行“appendChild”：参数 1 不是“Node”类型
大约 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>
【问题讨论】：
-
只需使用
slice而不是splice。 -
在旁注中，以“我是 StockOverflow 的新手”开头并拼错网站名称非常棒。
标签： javascript html css arrays function