How to Update my Div with new Image? Generate random Unsplash

#1

Hi All,

I have a question on how to update my div. I am importing the Unsplash Api and would like to randomly generate a picture. Its working but only for the first time I click the button.

Thanks for some advise on what to change or what function will be able to reload the div. I already tried with location.reload but it only works for the whole site.

Thanks a lot!

<script>
    function myFunction2() {
        var photo = new UnsplashPhoto();
        var testArr = [];
        testArr = photo.fetch();
        console.log("url:" + testArr);
        document.getElementById("myImg").src = testArr.toString();
    }
</script>

div class="myUnsplash">
      <img class="img-responsive img-thumbnail" id="myImg" src="#" alt="Random Unsplash Picture">

</div>
#2

Do you have a CodePen or something?

#3

HI BenGitter,

yes! I quickly created one:

The Problem is, that I have the unsplash javascript documents saved locally so I cant access it on codePen.

#4

Hmm, does it console log anything?

#5

Well it logs the correct url and puts it in the correct div.

Its working the first time you click the button, but not a second time.

How do I reload a div once I updated the src url in the div?

#6

You could remove the image and then add a new one? So it logs a new url every time you press the button?

#7