I am trying to get the pictures and some information from the pokemon API.
Here is the URL of the API: https://pokeapi.co/api/v2/pokemon/ditto
File: Index.html & script.js
"use strict";
document.querySelector(".button").addEventListener("click", () => {
console.log(
fetch("https://pokeapi.co/api/v2/pokemon/ditto")
.then((res) => res.json())
.then((data) => {
const weight = data.weight;
const frontPic = String(data.sprites.front_default);
const backPic = String(data.sprites.back_default);
const name = data.name;
console.log(weight, frontPic, backPic, name);
console.log(
(document.getElementsByClassName(".front-pic").src = frontPic)
);
document.getElementsByClassName(".front-pic").src = frontPic;
document.getElementsByClassName(".back-pic").src = backPic;
document.getElementsByClassName(".pokemon-weight").innerHTML = weight;
})
// {
// const weight = data.weight;
// const frontPic = data.sprites.front_default;
// const backPic = data.sprites.back_default;
// const name = data.name;
// }
);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="style.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<header>
<h1>POKEMON SEARCHER</h1>
</header>
<div class="search">
<label for="pokemon">Enter the pokemon name</label>
<input type="text" id="pokemon" placeholder="Pikachu" />
<button class="button">SEARCH</button>
</div>
<img class="front-pic" />
<img class="back-pick" />
<p class="pokemon-weight"></p>
</body>
<script src="script.js"></script>
</html>Here the image and text from the API have to appear in the respective elements. Things from the API are logging in the console but not appearing in the screen.
can anyone help me with this part?
