I recently started learning HTML and JS and got stuck at this point. I am using "cataas" to update a new image but every time I reload the page, nothing changes.
function loadCatPicture() {
var img = document.getElementById('cat-picture');
img.src = 'https://cataas.com/cat';
};
window.onload = function() {
loadCatPicture();
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Cats Sleep Anywhere</h1>
<p>
Cats sleep anywhere, any table, any chair.<br> Top of piano, window-ledge, in the middle, on the edge.<br> Open draw, empty shoe, anybody's lap will do.<br> Fitted in a cardboard box, in the cupboard with your frocks.<br> Anywhere! They don't care!
Cats sleep anywhere.<br>
<br>
<img id="cat-picture">
<b>Eleanor Farjeon</b></p>
<p></p>
</body>
</html>