Khi chạy lại chức năng, nó không đọc mảng toàn cầu

Question

Tôi là người mới bắt đầu viết mã và StockOverflow. Đây là bài viết đầu tiên của tôi, vì vậy xin vui lòng tha thứ nếu bài viết của tôi không được định dạng chính xác vì tôi chỉ là một học sinh trung học cơ sở. Tuy nhiên, trên ghi chú đó, tôi có một câu hỏi liên quan đến mã của tôi bên dưới. Chỉ cần một nền tảng nhỏ, mã này được cho là tạo ra một danh sách vận mệnh và nối thêm mỗi tài sản, sau đó một khi nó đã trải qua toàn bộ danh sách, nó tạo lại một cái mới theo thứ tự ngẫu nhiên. (tham khảo mã bên dưới) Sự cố xảy ra trong thời gian anotherFortune(). Khi hàm này chạy lại generateFortuneCookie(), trong thời gian SECOND, nó dường như không kéo bất kỳ giá trị nào từ mảng fortunesList. Nó console.logs như, "Bạn sẽ." Ngoài ra, nó không tái tạo danh sách thứ ba, google chrome đưa ra lỗi bên dưới.

app.js:33 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node

Khi nút được nhấp sau khoảng 10 lần. Xin lưu ý rằng tôi chưa học được jQuery, vì vậy bất kỳ giải pháp nào tôi thích một giải pháp JavaScript.

đang

JavaScript bên dưới:

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 dưới đây:

<!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> 

Answer 1

Bởi vì phương pháp splice danh sách fortunesList của bạn đang được "cắt" và giảm các yếu tố của nó nên sau khi cuộc gọi đầu tiên của generateFortuneCookie() mảng bị làm rỗng. Đề nghị của tôi là bạn sử dụng một mảng temp ở đầu của generateFortuneCookie() và vượt qua các yếu tố fortunesList vào mảng temp mỗi khi generateFortuneCookie() được gọi.

Và chỉ trong trường hợp giải thích của tôi sucks chỉ cần thêm dòng này để generateFortuneCookie()

var tempList = fortunesList; 

và thay thế tất cả các tài liệu tham khảo fortunesList trong generateFortuneCookie() với tempList.

Ngoài ra, bạn có thể sử dụng slice thay vì splice

Hãy cho tôi biết nếu điều này làm việc cho bạn.

CẬP NHẬT

Ok, tôi quyết định sử dụng một danh sách bản sao của fortuneList của bạn và có vẻ như để làm việc.

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); 
}