I am new to coding and StockOverflow. This is my first post, so I apologize if my post is not formatted correctly, since I am only the youngest in high school. However, on this note, I had a question regarding my code below. With a little background, this code should generate a fate list and add each state, and then, when it has gone through the entire list, it restores a new one in an arbitrary order. (see code below) The problem occurs during anotherFortune() . When this function restarts generateFortuneCookie() , for the SECOND time, it does not seem to pull any values from the fortunesList array. This is console.logs like "You Will." In addition, it does not restore the third list, google chrome gives an error below.
app.js: 33 Uncaught TypeError: Failed to execute 'appendChild' in 'Node': parameter 1 is not of type 'Node
When the button is pressed after about 10 times. Please note that I have not studied jQuery yet, so any solutions that I would prefer for a JavaScript solution.
JavaScript code below:
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 code below:
<!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>
source share