Question

所以我有一个html文件，它调用了一个javascript函数 on body load 。我想一个接一个地显示一个数组元素。首次加载时，它应显示＆＃34; 一个＆＃34;在下次加载时，它应显示＆＃34; 三＆＃34;等等但它不断向我展示第一个字。你能解释一下我做错了什么并建议我解决方案吗？非常感谢你提前！

这是我的HTML

<html lang="en">
<head>
<script src="/style/js/wordSet.js"></script>
</head>
<body>
<body onload="getWord()">
<div id="character"></div>
</body>
</html>

那是我的 wordSet.js

    function getWord(){
    var testList = ["one","three","right"]

       var resultSet = testList.shift();
        document.getElementById("character").innerHTML = resultSet;
}

Answer 1

每次调用该函数时，都会重新初始化该数组，并将所有值重新放入其中。您可以通过初始化函数来解决该问题。

这会让您遇到第二个问题，即每次加载页面时，都会从头开始重新启动程序。

您需要使用一些持久性存储（例如 localstorage 或 cookie 来跟踪数组中的位置，然后在页面加载时读取它

Answer 2

当您关闭/刷新页面时，您所做的每一项更改都将消失。使用testList

保留localStorage数组

function getWord() {
  var original = ["one", "three", "right"];
  // try to retrieve array from localStorage, return default if it doesn't exist
  var testList = localStorage.testList ? JSON.parse(localStorage.testList) : original ;
  var resultSet = testList.shift();
  // store the array in localStoarge after you change it
  localStorage.testList = JSON.stringify(testList.length ? testList : original );
  document.getElementById("character").innerHTML = resultSet;
}

JavaScript - on body load next数组元素

2 个答案: