The button doesn’t function. I get “Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)” and the type of the form is ‘object’. The code runs perfectly in Visual Studio Code with live server… Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokemon Search App</title>
<link href="./styles.css" rel="stylesheet" />
<script src="./script.js" defer></script>
</head>
<body>
<h1>Pokemon Search App</h1>
<div id="application-body">
<div id="header-div">
<div>Search for a pokemon name or id:</div>
<form id="search-form">
<input id="search-input" />
<button id="search-button">Search</button>
</form>
</div>
<div id="main-screen-div">
<div id="info">
<div id="identity">
<div id="pokemon-name"></div>
<div id="pokemon-id"></div>
</div>
<div id="size">
<div id="weight"></div>
<div id="height"></div>
</div>
</div>
<div id="sprite-container"></div>
<div id="types"></div>
</div>
<div id="statline">
<div id="stats-label">Base Stats</div>
<div class="stats-div">
<div class="label">HP:</div>
<div class="stat" id="hp"></div>
</div>
<div class="stats-div">
<div class="label">Attack:</div>
<div class="stat" id="attack"></div>
</div>
<div class="stats-div">
<div class="label">Defence:</div>
<div class="stat" id="defense"></div>
</div>
<div class="stats-div">
<div class="label">Sp. Attack:</div>
<div class="stat" id="special-attack"></div>
</div>
<div class="stats-div">
<div class="label">Sp. Defence:</div>
<div class="stat" id="special-defense"></div>
</div>
<div class="stats-div">
<div class="label">Speed:</div>
<div class="stat" id="speed"></div>
</div>
</div>
</div>
</body>
</html>
const pokemonID = document.getElementById('pokemon-id');
const pokemonName = document.getElementById('pokemon-name');
const spriteContainer = document.getElementById('sprite-container');
const types = document.getElementById('types');
const height = document.getElementById('height');
const weight = document.getElementById('weight');
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 searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const getPokemon = async () => {
try {
const pokemonNameOrId = searchInput.value.toLowerCase();
const response = await fetch(
`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemonNameOrId}`
);
const data = await response.json();
if (!response.ok) {
pokemonNotFound();
return;
}
updatePokemonData(data);
} catch (err) {
console.error('An error occurred:', err);
alert('An error occurred. Please try again later.');
}
};
const pokemonNotFound = () => {
resetDisplay();
alert('Pokemon not found');
};
const updatePokemonData = (data) => {
pokemonName.textContent = `${data.name.toUpperCase()}`;
pokemonID.textContent = `#${data.id}`;
weight.textContent = `Weight: ${data.weight}`;
height.textContent = `Height: ${data.height}`;
spriteContainer.innerHTML = `
<img id="sprite" src="${data.sprites.front_default}" alt="${data.name} front default sprite">`;
hp.textContent = data.stats[0].base_stat;
attack.textContent = data.stats[1].base_stat;
defense.textContent = data.stats[2].base_stat;
specialAttack.textContent = data.stats[3].base_stat;
specialDefense.textContent = data.stats[4].base_stat;
speed.textContent = data.stats[5].base_stat;
types.innerHTML = data.types
.map((obj) => `<span class="type ${obj.type.name}">${obj.type.name}</span>`)
.join('');
};
const resetDisplay = () => {
const sprite = document.getElementById('sprite');
if (sprite) {
sprite.remove()
};
pokemonName.textContent = '';
pokemonID.textContent = '';
types.innerHTML = '';
height.textContent = '';
weight.textContent = '';
hp.textContent = '';
attack.textContent = '';
defense.textContent = '';
specialAttack.textContent = '';
specialDefense.textContent = '';
speed.textContent = '';
};
searchForm.addEventListener('submit', (e) => {
e.preventDefault();
getPokemon();
});
