Clever Geek Handbook

HTML img src not updating dynamically

In a section of my desktop app, I wrote a function that updates / rewrites the div text and html image source in the output of the json file (which changes), however the img src does not change with it.

What the app looks like . The "logo" image should change when the text (news headlines) changes.

Here's a part of the function :

function newsAPI(){
  for(i = 0; i<config['newsapi']['sources'].length;i++) {
    document.getElementById('news_icon').src="img/news/" + config['newsapi']['sources'][i] + ".png";
    request({
      url: 'https://newsapi.org/v1/articles?source=' + config['newsapi']['sources'][i] + '&sortBy=top&apiKey=' + config['newsapi']['api_key'],
      method: 'get'
    }, function (err, res, body){
      var parsedbody = JSON.parse(body)
      parsedbody = parsedbody['articles'];
      document.getElementById('news_1').innerHTML = parsedbody[0]['title'];
      document.getElementById('news_2').innerHTML = parsedbody[1]['title'];
      document.getElementById('news_3').innerHTML = parsedbody[2]['title'];
      document.getElementById('news_4').innerHTML = parsedbody[3]['title'];
      document.getElementById('news_5').innerHTML = parsedbody[4]['title'];

    })
      sleep(10000);
  }
}

This function outputs news headlines as json data from API. config['newsapi']['sources'][i]

matches the names of images in the directory (config ['newsapi'] ['sources'] is a list)

Here's the relevant part of the HTML:

    <div id="img" class ="image"></div>
    <img id="news_icon" class="news_head" />
    <div id="news_1" class ="news"></div>
    <div id="news_2" class ="news"></div>

My sleep function:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
+3


source to share


2 answers


The problem should be with this line:

document.getElementById('news_icon').src="img/news/" + config['newsapi']['sources'][i] + ".png";

Add console.log(config['newsapi']['sources'][i]);

before this line and check the output.

Check the following:

  • It may config['newsapi']['sources']

    not have a string or the wrong path.
  • Or the string is something like "bbc.png" which means that the "src" attribute of the image gets the value "img / news / bbc.png.png" (double.png)
  • Or, the path returned has a full path that leads to "img / news / img / news / bbc.png"
  • Or maybe the link to the image is correct, it's just that the image doesn't exist in this "img / news" path.

EDIT:



What would you like to do, follow these steps: 1. make a request to the server, then wait 10 seconds.

Your code will not work as expected because the request is an asynchronous function, meaning it will not wait for a sleep function.

Here's how to do it with async functions. I put your iteration code inside a function setTimeout

:

function newsAPI() {
    for(i = 0; i<config['newsapi']['sources'].length; i++) {
        setTimeout(function() {
            document.getElementById('news_icon').src = "img/news/" + config['newsapi']['sources'][i] + ".png";
            request({
                url: 'https://newsapi.org/v1/articles?source=' + config['newsapi']['sources'][i] + '&sortBy=top&apiKey=' + config['newsapi']['api_key'],
                method: 'get'
                }, function (err, res, body){
                    var parsedbody = JSON.parse(body)
                    parsedbody = parsedbody['articles'];
                    document.getElementById('news_1').innerHTML = parsedbody[0]['title'];
                    document.getElementById('news_2').innerHTML = parsedbody[1]['title'];
                    document.getElementById('news_3').innerHTML = parsedbody[2]['title'];
                    document.getElementById('news_4').innerHTML = parsedbody[3]['title'];
                    document.getElementById('news_5').innerHTML = parsedbody[4]['title'];
                });
        }, 10000 * i);
    }
}

EDIT 2:

function newsAPI() {
    for(i = 0; i<config['newsapi']['sources'].length; i++) {
        setTimeout(function() {
            document.getElementById('news_icon').src = "img/news/" + config['newsapi']['sources'][i] + ".png";
            request({
                url: 'https://newsapi.org/v1/articles?source=' + config['newsapi']['sources'][i] + '&sortBy=top&apiKey=' + config['newsapi']['api_key'],
                method: 'get'
                }, function (err, res, body){
                    var parsedbody = JSON.parse(body)
                    parsedbody = parsedbody['articles'];
                    document.getElementById('news_1').innerHTML = parsedbody[0]['title'];
                    document.getElementById('news_2').innerHTML = parsedbody[1]['title'];
                    document.getElementById('news_3').innerHTML = parsedbody[2]['title'];
                    document.getElementById('news_4').innerHTML = parsedbody[3]['title'];
                    document.getElementById('news_5').innerHTML = parsedbody[4]['title'];
                    if(i+1 == config['newsapi']['sources'].length) {// if is last iteration, repeat again
                        setTimeout(newsAPI, 10000);
                    }
                });
        }, 10000 * i);
    }
}
+2


source


If this happened to me last week

try it



document.getElementById('news_icon').src="img/news/" + config['newsapi']['sources'][i] + new Date().getTime() + ".png";
0


source






More articles:


All Articles