zak*_*.s_ 5 html javascript css arrays function
我是编码和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>
由于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);
}
| 归档时间： |
|
| 查看次数： |
120 次 |
| 最近记录： |