Question

我是编码和StockOverflow的初学者。这是我的第一篇文章所以请原谅我的帖子格式不正确因为我只是高中三年级。但是，在那个问题上，我对下面的代码有疑问。只是一点点背景，这段代码应该生成一个命运列表并附加每个财富，然后一旦它通过整个列表，它就会以随机顺序重新生成一个新的。（请参阅下面的代码）问题发生在anotherFortune()期间。当此函数重新运行generateFortuneCookie()时，对于SECOND时间，它似乎不会从fortunesList数组中提取任何值。它将console.logs as，＆＃34;你会。＆＃34;此外，它不会重新生成第三个列表，谷歌浏览器会给出以下错误。

app.js：33 Uncaught TypeError：无法执行＆＃39; appendChild＆＃39; on＆＃39;节点＆＃39;：参数1不是类型＆＃39;节点

大约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>

Answer 1

由于splice方法，您的fortunesList列表正在＆＃34; cut＆＃34;并删除其元素，因此在第一次调用generateFortuneCookie（）后，数组将被清空。我的建议是你在generateFortuneCookie（）的开头使用一个临时数组，并在每次调用generateFortuneCookie（）时将fortunesList元素传递给temp数组。

如果我的解释很糟糕，只需将此行添加到generateFortuneCookie（）

即可

var tempList = fortunesList;

并使用tempList替换generateFortuneCookie（）中的每个fortunesList引用。

或者，您可以使用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);
}

再次运行函数时，它不会读取全局数组

1 个答案: