I am trying to display a different image within the same tag when a different value is searched in a search bar. Here is the the html code as default when Pikachu is searched. I have provided all of the html as well as javascript that I have used. This is for a freeCodeCamp project called Pokemon Search App. Also when I add this code my “types.innerHTML” for “GHOST” and “POISON” is not displaying.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Pokemon Search App</title>
</head>
<body>
<h1>Pokemon Search App</h1>
<input id="search-input" required></input>
<button id="search-button">Click Me</button>
<p id="pokemon-name"></p>
<p id="pokemon-id"></p>
<p id="weight"></p>
<p id="height"></p>
<p id="types"></p>
<p id="hp"></p>
<p id="attack"></p>
<p id="defense"></p>
<p id="special-attack"></p>
<p id="special-defense"></p>
<p id="speed"></p>
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png" style="display: none;" id="sprite" class="pikachu-sprite">
<script src="./script.js"></script>
</body>
</html>
Here is the javascript I am currently using to change it when 94 (Gengar) is searched.
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const hp = document.getElementById("hp");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const specialAttack = document.getElementById("special-attack");
const specialDefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");
const types = document.getElementById("types");
const pikachuImage = document.getElementById("sprite");
searchButton.addEventListener('click', function pikachuSearch() {
if (searchInput.value.toLowerCase() === 'pikachu') {
pokemonName.innerText = 'PIKACHU';
pokemonId.innerText = '25';
weight.innerText = 'Weight: 60';
height.innerText = 'Height: 4';
hp.innerText = '35';
attack.innerText = '55';
defense.innerText = '40';
specialAttack.innerText = '50';
specialDefense.innerText = '50';
speed.innerText = '90';
pikachuImage.style.display = "block";
types.innerHTML = `<span>ELECTRIC</span>`;
} else if (searchInput.value === '94') {
pokemonName.innerText = 'GENGAR';
pokemonId.innerText = '94';
weight.innerText = '405';
height.innerText = 'Height: 15';
hp.innerText = '60';
attack.innerText = '65';
defense.innerText = '60';
specialAttack.innerText = '130';
specialDefense.innerText = '75';
speed.innerText = '110';
gengarImage.style.display = "block";
types.innerHTML = `
<span>GHOST</span>
<span>POISON</span>`;
changeImgSrc();
} else if (searchInput.innerText = 'Red') {
// Display an alert if the input is empty
alert('Pokémon not found');
}
});
function changeImageSrc() {
pikachuImage.src = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/94.png';
}
function changeImageSrc() {
pikachuImage.src = '<https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/94.png>';
}
