Problem with Twitch TV challenge

JavaScript
1

I am trying to get this Twitch TV project to work and to cycle through all the users, but am unable to change the HTML when I click the button.

The link to my codepen is:

My HTML is

 <div class="container-fluid">
  <div class = "row text-center">
    <h2>Twitch App</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>


<div class="card" style="width: 18rem;">
   <img class="card-img-top" id="imofcard0" src="https://images.freeimages.com/images/small-previews/615/corcovado-sunset-1527899.jpg" alt="Card image">
<div class="card-body">
    <h2 class="card-title" id="result0title">Card title 0</h2>
    <p class="card-text" id="result0text">card text 0</p>
    <a href="#" class="btn btn-primary" target = "_blank" id="result0link">View this Stream!</a>
  </div>
</div>

<div class="card" style="width: 18rem;">
   <img class="card-img-top" id="imofcard1" src="https://images.freeimages.com/images/small-previews/615/corcovado-sunset-1527899.jpg" alt="Card image">
<div class="card-body">
    <h2 class="card-title" id="result1title">Card title 1</h2>
    <p class="card-text" id="result1text">card text 1</p>
    <a href="#" class="btn btn-primary" target = "_blank" id="result1link">View this Stream!</a>
  </div>
</div>

<div class="card" style="width: 18rem;">
   <img class="card-img-top" id="imofcard2" src="https://images.freeimages.com/images/small-previews/615/corcovado-sunset-1527899.jpg" alt="Card image">
<div class="card-body">
    <h2 class="card-title" id="result2title">Card title 2</h2>
    <p class="card-text" id="result2text">card text 2</p>
    <a href="#" class="btn btn-primary" target = "_blank" id="result2link">View this Stream!</a>
  </div>
</div>

and my Javascript is:

$(document).ready(function() {
  var channarr = ["MedryBW", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  
    $("#getMessage").on("click", function(){
      for (var i = 0; i < 3; i++)  {
    console.log("the value of channarr[", i, "] is: ", channarr[i]);
   $.getJSON("https://wind-bow.gomix.me/twitch-api/channels/" + channarr[i] + "?callback=?", function(json) {
$(".message").html(JSON.stringify(json));
     console.log("the value of channarr[", i, "] is: ", channarr[i]);
      console.log("the display name is: ", json.display_name);
      console.log("the game is: ", json.game);
     console.log("the logo link is: ", json.logo);
      console.log("the Twitch TV link is: ", json.url);
     document.getElementById("result" + i + "title").innerHTML=json.display_name;
      document.getElementById("result" + i + "text").innerHTML=json.status;
     document.getElementById("imofcard" + i).src=json.logo;
     document.getElementById("result" + i + "link").href=json.url;
});
       
      // Only change code above this line.
    };
                  
  })});
3

By browser console says the following when I click the button:

the value of channarr[ 0 ] is: MedryBW console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1:2194
the value of channarr[ 1 ] is: ESL_SC2 console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1:2194
the value of channarr[ 2 ] is: OgamingSC2 console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1:2194
the x value of channarr[ 3 ] is: cretetion console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1:2194
the display name is: ESL_SC2 console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1:2194
the game is: StarCraft II console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1:2194
the logo link is: “https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg” console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1:2194
…

5

Because I am limited to 2 hyperlinks, i’ve modified the links in the browser console below to change http to hp

7

Access to Font at ‘hps://static.codepen.io/assets/telefon/bold/af889c53-1ee3-4868-8fdc-2b310d587b50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff’ from origin ‘hps://codepen.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘hps://codepen.io’ is therefore not allowed access.
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the value of channarr[ 0 ] is: MedryBW
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the value of channarr[ 1 ] is: ESL_SC2
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the value of channarr[ 2 ] is: OgamingSC2
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the x value of channarr[ 3 ] is: cretetion
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the display name is: ESL_SC2
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the game is: StarCraft II
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the logo link is: hps://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the Twitch TV link is: https://www.twitch.tv/esl_sc2
pen.js:14 Uncaught TypeError: Cannot set property ‘innerHTML’ of null
at Object.success (pen.js:14)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at k (jquery.min.js:2)
at HTMLScriptElement.n (jquery.min.js:2)
at HTMLScriptElement.dispatch (jquery.min.js:2)
at HTMLScriptElement.y.handle (jquery.min.js:2)
(anonymous) @ pen.js:14
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
k @ jquery.min.js:2
n @ jquery.min.js:2
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2
load (async)
add @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
each @ jquery.min.js:2
each @ jquery.min.js:2
De @ jquery.min.js:2
on @ jquery.min.js:2
send @ jquery.min.js:2
ajax @ jquery.min.js:2
w.(anonymous function) @ jquery.min.js:2
getJSON @ jquery.min.js:2
(anonymous) @ pen.js:7
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the x value of channarr[ 3 ] is: cretetion
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the display name is: MedryBW
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the game is: StarCraft
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the logo link is: hps://static-cdn.jtvnw.net/jtv_user_pictures/medrybw-profile_image-19fce7e1b0d6c194-300x300.jpeg
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the Twitch TV link is: hps://www.twitch.tv/medrybw
pen.js:14 Uncaught TypeError: Cannot set property ‘innerHTML’ of null
at Object.success (pen.js:14)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at k (jquery.min.js:2)
at HTMLScriptElement.n (jquery.min.js:2)
at HTMLScriptElement.dispatch (jquery.min.js:2)
at HTMLScriptElement.y.handle (jquery.min.js:2)
(anonymous) @ pen.js:14
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
k @ jquery.min.js:2
n @ jquery.min.js:2
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2
load (async)
add @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
each @ jquery.min.js:2
each @ jquery.min.js:2
De @ jquery.min.js:2
on @ jquery.min.js:2
send @ jquery.min.js:2
ajax @ jquery.min.js:2
w.(anonymous function) @ jquery.min.js:2
getJSON @ jquery.min.js:2
(anonymous) @ pen.js:7
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the x value of channarr[ 3 ] is: cretetion
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the display name is: OgamingSC2
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the game is: StarCraft II
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the logo link is: hps://static-cdn.jtvnw.net/jtv_user_pictures/ogamingsc2-profile_image-9021dccf9399929e-300x300.jpeg
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 the Twitch TV link is: hps://www.twitch.tv/ogamingsc2
pen.js:14 Uncaught TypeError: Cannot set property ‘innerHTML’ of null
at Object.success (pen.js:14)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at k (jquery.min.js:2)
at HTMLScriptElement.n (jquery.min.js:2)
at HTMLScriptElement.dispatch (jquery.min.js:2)
at HTMLScriptElement.y.handle (jquery.min.js:2)

9

Yes I see them.

What may be the best way to overcome this problem?

Is there a way to prevent i from incrementing until the JSON is returned and the HTML is altered?

Or is there a way to make the $.getJSON synchronous?