How do I display a random cat image from an API on my webpage using async-await in JavaScript and HTML?
P粉617237727
2023-09-04 15:22:47
<p>I'm writing a program that makes calls from an API to get random cat images. I want to be able to display the image on my webpage, not just the url in the console. </p>
<p>//This is my html (this is really basic but I just want the output to work)</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Gif</title>
</head>
<body>
<div class="container">
<h1>This is a random image of a cat!</h1>
</div>
<script src="catGif.js">
</script>
</body>
</html></pre>
<p>//This is my JavaScript</p>
<pre class="brush:php;toolbar:false;">let container = document.querySelector(".container");
async function apiFunction() {
await fetch("https://api.thecatapi.com/v1/images/search")
.then(res => res.json())
.then((result) => {
//items = result;
let img = document.createElement("img");
img.src = result[0].url;
container.appendChild(img);
}),
(error) => {
console.log(error);
}
}</pre></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You did not call the function you defined.
This is a random image of a cat!