2016-12-21 10 views
5

नहीं पढ़ता है, मैं कोडिंग और स्टॉक ओवरफ्लो में काफी शुरुआत कर रहा हूं। यह मेरी पहली पोस्ट है इसलिए कृपया क्षमा करें यदि मेरी पोस्ट सही ढंग से स्वरूपित नहीं है क्योंकि मैं केवल हाई स्कूल में जूनियर हूं। उस नोट पर हालांकि, मेरे पास नीचे दिए गए कोड के बारे में एक प्रश्न था। बस थोड़ी सी पृष्ठभूमि, यह कोड भाग्य की एक सूची उत्पन्न करना और प्रत्येक भाग्य को जोड़ना है, फिर एक बार यह पूरी सूची के माध्यम से चला गया है, यह एक यादृच्छिक क्रम में एक नया पुनर्जन्म देता है। (नीचे दिए गए कोड का संदर्भ लें) समस्या anotherFortune() के दौरान होती है। जब यह फ़ंक्शन generateFortuneCookie() को दोबारा शुरू करता है, तो दूसरी बार यह भाग्य सूची सरणी से किसी भी मूल्य को खींचने के लिए प्रतीत नहीं होता है। यह console.logs के रूप में, "आप करेंगे।" साथ ही, यह तीसरी सूची को पुन: उत्पन्न नहीं करता है, Google क्रोम नीचे त्रुटि देता है।फिर फ़ंक्शन चलाते समय यह वैश्विक सरणी

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

जब बटन लगभग 10 बार क्लिक किया जाता है। कृपया ध्यान दें कि मैंने अभी तक jQuery नहीं सीखा है, इसलिए कोई समाधान मैं जावास्क्रिप्ट समाधान पसंद करूंगा।

नीचे

जावा स्क्रिप्ट कोड:

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

एचटीएमएल नीचे कोड:

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

बस का उपयोग '' बजाय splice' की slice'। –

+1

एक तरफ ध्यान दें, "मैं स्टॉकओवरफ्लो में नया हूं" और प्रीफ़ासिंग द्वारा साइट के नाम की गलत वर्तनी बहुत बढ़िया है। –

उत्तर

1

क्योंकि splice विधि के अपने fortunesList सूची किया जा रहा है "कट" और इतने उसके तत्वों चला जाता है generateFortuneCookie की पहली कॉल के बाद() सरणी खाली हो जाती है। मेरा सुझाव है कि आप GenerFortuneCookie() की शुरुआत में एक temp सरणी का उपयोग करें और भाग्य पास करें प्रत्येक बार उत्पन्न होने वाले temp सरणी में तत्व तत्वों को फोर्ट्यूनक्यूकी() कहा जाता है।

और बस के मामले में मेरी व्याख्या सिर्फ generateFortuneCookie (में यह पंक्ति जोड़ बेकार)

var tempList = fortunesList; 

और हर fortunesList() tempList साथ generateFortuneCookie में संदर्भ की जगह।

वैकल्पिक रूप से, आप आप 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); 
} 
+0

आपके उत्तर के लिए धन्यवाद, हालांकि स्लाइस का उपयोग करके केवल "आप करेंगे" उत्पन्न करेंगे। कंसोल अर्थ पर, यह randomFortune पढ़ नहीं रहा है। TempList का उपयोग करके भी वही परिणाम उत्पन्न होता है और दूसरी बार ठीक से "आप करेंगे" के आउटपुट को ठीक से नहीं चलाता है। भी। –

+0

@ zak.s_ क्या आप अपने कोड के साथ एक jsfiddle लिंक प्रदान कर सकते हैं ताकि मैं आपकी समस्या को देख सकूं? – catchiecop

+0

मैंने प्रतिलिपि जेएस फिडल में अपना कोड चिपकाया है, https://jsfiddle.net/1bbLeyqa/1/ –

संबंधित मुद्दे