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

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>

Do you have a CodePen or something?

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.

Hmm, does it console log anything?

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?

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