setIntervalを使用してAPIからのテキストを置き換えます

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を多くのジョークの配列として扱っていますが、これは実際には文字列（つまり、1つのジョーク）です。この変数を反復すると、文字列をループしてジョークの各文字に対してアクションを実行していることを意味します。

APIはデータベースからランダムなジョークを返すので、ローカル配列を作成してランダムな要素を選択する代わりに、APIに複数のリクエストを送信して毎回新しい（ランダムな）ジョークを得ることができます。ここでは、これを行い、コードの変更があります：

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;

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