Javascript代码无法按预期工作

Question

我正在研究codepen项目。它实际上是freecodecamp项目。在下面的代码中，我使用twitch api来获取关于几个通道的数据（即图标，网址，状态）。我创建了一个函数（mymain（key）），它接受一个参数，即一个键来决定你想要看到的频道列表。如果1作为参数传递，它将显示所有通道。如果2作为参数传递，它将仅显示在线渠道。如果为3，则仅显示离线频道。它使用jquery完美地获取数据但是当我尝试使用key显示它时会出现问题。底部的所有三个单击语句都在运行，而html中的按钮不起作用。

//channel names variable initialization
    var channelNames = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas"];
    //parts of url to get data    
    var url1 ="https://wind-bow.gomix.me/twitch-api/channels/", url2 = "https://wind-bow.gomix.me/twitch-api/streams/", urlend="/?callback=?", htm="";

    //function mymain
    function mymain(key){
      channelNames.forEach(function(name){
        $.getJSON(url1+name+urlend,function(data){
          var Name = name, status="", icon = data.logo, channelWeb = data.url;
          var urltemp2 = url2+name+urlend, status = data.status,myvar = 1;//myvar is used to check if a channel is online
          $.getJSON(urltemp2,function(data){
            if (data.stream===null){
              status="Offline";
              myvar = 0;
            }
    //The code inside all the conditions is same.
    //for All channels this condition works
            if (key===1){
             htm = htm +"  <div class=\"box row\"><div class=\"images col-xs-1\"><img class=\"img-responsive img-circle\" src ="+icon+"></div><div class=\"text-left col-xs-4\"><a target=\"_blank\" href=\""+channelWeb+"\">"+Name+"</a></div><div class=\"text-center col-xs-7\">"+status+"</div></div><hr>"; 
            }

    //this condition is for online channels
            else if (key===2 && myvar===1){
            htm = htm +"  <div class=\"box row\"><div class=\"images col-xs-1\"><img class=\"img-responsive img-circle\" src ="+icon+"></div><div class=\"text-left col-xs-4\"><a target=\"_blank\" href=\""+channelWeb+"\">"+Name+"</a></div><div class=\"text-center col-xs-7\">"+status+"</div></div><hr>";
              
            }

    //this condition is for offline channels
        else if(status==="Offline"){
            htm = htm +"  <div class=\"box row\"><div class=\"images col-xs-1\"><img class=\"img-responsive img-circle\" src ="+icon+"></div><div class=\"text-left col-xs-4\"><a target=\"_blank\" href=\""+channelWeb+"\">"+Name+"</a></div><div class=\"text-center col-xs-7\">"+status+"</div></div><hr>";
            }
            $(".channelsInfo").html(htm);
          });
        });
      });
    }
    $(document).ready(mymain(1));
    $(".Online").click(mymain(2));
    $(".All").click(mymain(1));
    $(".Offline").click(mymain(3));

body{
  background-color:#222222;
  color:#AAAAAA;
}
#title{
  background-color:#4a4a4a;
  margin-top:3%;
}
img{
  width:50px;
}
.images{
 border-right: 3px solid grey;
}
.All:hover{
  color:blue;
}
.channelsInfo{
  background-color:#192345;
}
.box{
  margin:1%;
  padding:1%;
}
h1{
  padding:3%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="title" class="text-center ">
    <h1>Twitch Streamers</h1>
  </div>
  <div class="row text-left">
    <div class="All col-xs-1">
     <button> All</button>
    </div>
    <div class="Online col-xs-1">
      <button>   Online</button>
    </div>
    <div class="Offline col-xs-1">
      <button onclick="mymain(2)">Offline</button>
    </div>
    <div class="col-xs-9"></div>
  </div>
  <div class="channelsInfo">
  </div>
</div>