英文:
How can I display a random cat image from an API on my webpage using async-await in JavaScript and HTML?
问题
我正在编写一个程序，它调用一个API以获取一张随机的猫咪图片。我想要能够在我的网页上显示这张图片，而不仅仅在控制台中显示URL。
这是我的HTML（非常基本，但我只想让输出正常工作）：
<!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>
这是我的JavaScript：
let container = document.querySelector(".container");
async function apiFunction() {
await fetch("https://api.thecatapi.com/v1/images/search")
.then(res => res.json())
.then((result) => {
let img = document.createElement("img");
img.src = result[0].url;
container.appendChild(img);
}),
(error) => {
console.log(error);
}
}
英文:
I am writing a program which calls from an API to get a random cat image. I want to be able to display that image on my webpage and not just display the url in the console.
//This is my html (It is really basic but I just want to get the output to work)
<!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>
//This is my javascript
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);
}
}
答案1
得分: 2
你没有调用你定义的函数。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
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);
}
}
// Call the function
apiFunction();
</script>
</body>
</html>
<!-- end snippet -->
如果你需要进一步的帮助，请告诉我。
英文:
You did not call your defined function.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
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);
}
}
// Call the function
apiFunction();
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论