Problem with Twitch TV challenge

Problem with Twitch TV challenge
0

#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.
    };
                  
  })});

#2

You need to look at your browser’s console and see the error messages. When you try to reference the variable i, it is apart of the global scope of the click callback function. Remember that $.getJSON is asynchronous and does not pause other code while it waits for a response to come back each time it is called. What ends up happening is the for loop finishes and i = 3 by the time the responses come back, so for example, the following line of code evaluates to:

  document.getElementById("result3title").innerHTML=json.display_name;

Since there is no element with id=“result3title”, you end up with:

null.innerHTML=json.display_name;

and hence error message Uncaught TypeError: Cannot set property of ‘innerHTMl’ of null showing in the console several times.

Read about let and you will find it very useful in this situation.


#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


#4

The browser’s console (Ctrl+Shft+J in Chrome), not Codepen’s console.


#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)


#8

See those three lines that look like the following?

pen.js:14 Uncaught TypeError: Cannot set property ‘innerHTML’ of null

Those are the errors caused by the asynchronous nature of the way your code is using the $.getJSON calls with the variable i.


#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?


#10

See my first response to you. I gave you a link about something that will create a block scope for i, so each time the $.getJSON is used, it will “remember” the value of i at the time of the call.