While completing a project for FreeCodeCamp I had the idea to create a simple website which can get me a random picture of a cat when pressing a button. So I found the http://thecatapi.com/ which will get me a random src so I can add it to my img tag. I've made this with jQuery as it's easier from me coming from FCC.
As the api will get me the random source url I didn't think it would be difficult, however with the code I implemented, the button which request for a cat only works the first time it's clicked.
Here is my HTML
<img class="img-fluid" src="" id="kitties">
<div class="catText"> <h1>Your cat will spawn here!</h1></div>
<div class="buttons text-center">
<a class="btn btn-info" target="_blank" id="tweetButton">Tweet it!</a>
<button class="btn btn-secondary" id="kittyButton"> Generate </button>
</div>
And my Javascript
$(document).ready(function() {
$("#kittyButton").on("click", function(){
$('.catText').remove();
$("#kitties").attr('src','http://thecatapi.com/api/images/get')
});
});
How can I get a different image each time I click on the button?
Thanks in advance, you can see the whole code in my codepen right HERE