为什么我的函数返回为undefined？

Question

我一直在为FreeCodeCamp在codepen中构建一个项目，这个项目的一部分让我感到难过。

似乎代码应该有效，我在结果console.log时得到了正确的结果，但是当它们在页面上呈现时，它们会显示为未定义。

有人可以解释为什么我遇到这个问题吗？ 我觉得我遇到了很多，也许我错过了一些基本的概念。

这是我的codepen

这是我的JS：

$(document).ready(function(){

  var streams = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas"],
      url = 'https://wind-bow.gomix.me/twitch-api/',
      streamerInfo = [];

  for(var i = 0; i < streams.length; i++){
    var streamer = streams[i];
    getInfo(streamer, i);
  }

  function getInfo(streamer, i){
    $.ajax({
      dataType: 'json',
      type: "GET",
      url: url + 'channels/' + streamer + '?callback=?',
      success: function(data){
        // console.log(data);
        createHTML(data, i);
      },
      error: function(data){
        console.log('Fail');
        $('#streamers-container').html("<h2>Error. Please Refresh Page or Try Again Later</h2>");
      }
    });
  }

  function createHTML(data, i) {
    var status = "Offline";
    function displayStatus(i){
        $.ajax({
        dataType: 'json',
        type: "GET",
        url: url + 'streams/' + streams[i] + '?callback=?',
        success: function(data){
          if (data.stream !== null) {
            status = data.stream.game;
            return status;
          } else {
            return status;
          }
          }, error: function(data){
            console.log('Fail');
            $('#streamers-container').html("<h2>Error. Please Refresh Page or Try Again Later</h2>");
          }
        });
      }

    document.getElementById('streamers-container').innerHTML +=
      '<div class="streamer-block">' +
        '<div class="streamer-logo">' +
          '<img class="image-responsive" src="' + data.logo + '">' + 
        '</div>' +
        '<div class="streamer-name">' +
          '<a href="' + data.url + '">' +
            data.display_name +
          '</a>' +
        '</div>' +
        '<div class="streamer-status">' +
          displayStatus(i) +
          // data.status +
        '</div>' +
      '</div>';
  }

//   End of script
});