Question

单击按钮时，我希望我的文本每3秒更改一次。我正在使用setInterval我可以在console.log中看到数字发生变化，但文字没有变化，我也不知道为什么。

我尝试过的事情：

setInterval(function() {
                   var quote = jokesArray[jokeNum];
         console.log(jokeTxt.innerHTML = quote);
} 

setInterval(function() {
               if (jokeTxt.innerHTML !== "") {
                   jokeTxt.innerHTML = "";
                   jokeNum++;
                   jokeTxt.innerHTML = jokesArray[jokeNum];
          }


setInterval(function() {
               var quote = jokesArray[Math.floor(Math.random() % 586) + 1];
     console.log(jokeTxt.innerHTML = quote);

完整脚本：

function main() {
        var myApi = "https://api.icndb.com/jokes/random";

        var xhttp = new XMLHttpRequest();
        var jokesArray = [];
        var randomIndex = Math.random();
        var randomizer = (randomIndex % 586) + 1;
        var jokeNum = Math.floor(randomizer);
        var jokeTxt = document.getElementById("jokeTxt");

        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == XMLHttpRequest.DONE) {
                var jokesJSON = JSON.parse(xhttp.responseText);
                var jokes = jokesJSON.value.joke;
                for (var i = 0; i < jokes.length; i++) {
                    jokesArray.push(jokes);
                }
                //allJokes = jokesArray[jokeNum];

                setInterval(function() {
               var quote = jokesArray[Math.floor(Math.random() % 586) + 1];
     console.log(jokeTxt.innerHTML = quote); 

                },3000);
            }
        }

        xhttp.open("GET", myApi, true);
        xhttp.send();
    }

    var myBtn = document.getElementById("btn");
    myBtn.onclick = main;

Answer 1

您使用的API一次只返回一个笑话，而不是多个笑话的数组。在你的代码中，你将var jokes视为许多笑话的数组，但这实际上只是一个字符串 - 即一个笑话。迭代这个变量意味着你循环遍历字符串并为笑话中的每个字符执行一个动作。

API还会从其数据库中返回一个随机笑话，因此您不必构建本地数组并选择随机元素，而只需向API发送多个请求并每次都获得一个新的（随机）笑话。以下是对您的代码的修改：

＆＃13;

var jokeTxt = document.getElementById("jokeTxt");

function getJoke() {
  var myApi = "https://api.icndb.com/jokes/random";
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == XMLHttpRequest.DONE) {
      var jokesJSON = JSON.parse(xhttp.responseText);
      var joke = jokesJSON.value.joke;
      jokeTxt.innerHTML = joke;
    }
  }

  xhttp.open("GET", myApi, true);
  xhttp.send();
}

function startJokes() {
  // get the first joke right away...
  getJoke();
  // ...then get a new joke every 3 seconds
  setInterval(function() {
    getJoke();
  }, 3000);
}

var myBtn = document.getElementById("btn");
myBtn.onclick = startJokes;

＆＃13;

<button id="btn">Start the Jokes!</button>
<div id="jokeTxt"><div>

＆＃13;

使用setInterval替换api中的文本

1 个答案: