還有其他方法可以整理我的 pokedex 嗎？

Question

這是我第一個使用 javascript 的項目，我在整理數據時遇到了麻煩。 目標是讓卡片按字母順序/倒序顯示，與顯示從 1 到 151 或從 151 到 1 的 ID 號相同。

這是代碼

 const pokeContainer = document.getElementById('poke_Container') const poke_Num = 150//This is the number of pokemon we want to display const sortInput = document.getElementById("filter-Buttons") //function that will fetch the object data we need const cardDetails = async () => { //loop that will fetch all the pokemon details for (let i = 1; i <= poke_Num; i++) { await getPokemon(i) } } //fetches the data thats needed from the pokeapi const getPokemon = async (id) => { const url = `https://pokeapi.co/api/v2/pokemon/${id}`; //fetch responds to the promises and fetches the url const thepokemon = await fetch(url); //this returns a promise that will parse the data as text json const data = await thepokemon.json(); createPokemonCard(data) } cardDetails(); function createPokemonCard(data) { const pokemon = document.createElement('div') pokemon.classList.add('pokemon')//actual pokemon card const name = data.name[0].toUpperCase() + data.name.slice(1);//capitilises the first letter/char of the name const poketure = data.sprites["front_default"]; const poketype = data.types.map((type) => type.type.name).join(" ") const pokemonInnerHTML = ` <div class='image-Container'> <img src="${poketure}" > </div> <div class='info'> <h3 class=poke-Name>${name}</h3> <span class="poke-id">#${data.id.toString()//converts the number to string so that the padstring parameter /*note padstart essentially takes in a target length and the padString and it will add whatever string you want to the length that you set until it is that exact length*/.padStart(3, "0")}</span> <br> <div class="poke-type">Type: ${poketype}</div> </div> ` pokemon.innerHTML = pokemonInnerHTML;//javascript colleted data is now going to be displayed in html pokeContainer.appendChild(pokemon);//without this the pokemon cards wont be displayed within the main div } // const sortInput = document.getElementById("filter-Buttons") sortInput.addEventListener('change', (event) =>{ const sortBy = event.target.value switch (sortBy) { case 'id-asc': pokemon.sort((pokeA, pokeB) => pokeA.id - pokeB.id) break case 'id-desc': pokemon.sort((pokeA, pokeB) => pokeB.id - pokeA.id) break case 'name-asc': pokemon.sort((pokeA, pokeB) => { if (pokeA.name < pokeB.name) return -1 if (pokeA.name > pokeB.name) return 1 return 0 }) break case 'name-desc': pokemon.sort((pokeA, pokeB) => { if (pokeA.name > pokeB.name) return -1 if (pokeA.name < pokeB.name) return 1 return 0 }) break } createPokemonCard(data) })

 <body> <header> <img src="/javascript/pokemon1/src/pokedex.png " alt="team-rocket png"> <audio controls> <source src="/javascript/pokemon1/src/pokemon.japanese.mp3" type="audio/ogg"> Your browser does not support the audio element. </audio> </header> <nav class="search-Box"> <a href="search.html"><button class="enter-Search">Click here to search pokemon</button></a> <span> <select name="sort" id="filter-Buttons"> <option value="id-asc">ID Ascending</option> <option value="id-desc">ID Descending</option> <option value="name-asc">Name Ascending (AZ)</option> <option value="name-desc">Name Descending (ZA)</option> </select> </span> </nav> <div id="poke_Container"></div> <script src="pokee.js"></script> </body>

我已經設計了它，只是沒有包括 CSS。

Answer 1

我建議您在收到 API 的響應后立即將您的 pokemon 數據數組存儲在全局 scope 中，這樣您就可以從函數中輕松訪問它。

給你一些注意事項：

請記住，在 function 內部聲明的變量只能在 function 及其內部函數內部訪問，除非您使用 var 定義變量，我建議您對 let const 和 var 之間的區別進行更多研究，因此 pokemon 變量將是事件偵聽器內部未定義。
在事件監聽器中，您應該對存儲在全局 scope 中的 pokemon 數據數組進行排序，並使用排序后的數組調用 createPokemonCard(pokemonDataArray) 以更新 html。

還有其他方法可以整理我的 pokedex 嗎？

問題描述

1 個解決方案

解決方案1
0 2022-08-08 20:19:58

還有其他方法可以整理我的 pokedex 嗎？

問題描述

1 個解決方案

解決方案1 0 2022-08-08 20:19:58

解決方案1
0 2022-08-08 20:19:58