Principiante en js. Estoy creando un pokedex usando pokeapi y quiero cambiar el fondo de las pokecards usando los colores según su tipo almacenado en un objeto usando .style en js
Actualmente he escrito este código
const typecolor = { bug: "#26de81", dragon: "#ffeaa7", electric: "#fed330", fairy: "#FF0069", fighting: "#30336b", fire: "#f0932b", flying: "#81ecec", grass: "#00b894", ground: "#EFB549", ghost: "#a55eea", ice: "#74b9ff", normal: "#95afc0", poison: "#6c5ce7", psychic: "#a29bfe", rock: "#2d3436", water: "#0190FF", }; const abilities = document.querySelector(".power1 p");//ptag inside pokecard function generatehtml(result) { const card = document.createElement("div"); card.classList.add("pokecard"); let newhtml = ` <div class=pokecard> . . . </div>` themecolor = typecolor[result.types[0].type.name]; //getting poketype from api card.style.background = `radial-gradient(circle at 50% 0%, ${themecolor} 36%, #ffffff 36%)`; abilities.style.backgroundColor = `${themecolor}`;//a <p> tag to be colored }Aunque Themecolor se desconecta de la consola, pero no hay una versión de trabajo de cambio visible: https://megahedron69.github.io/Pokedex/js archivo: https://github.com/Megahedron69/Pokedex/blob/main/app.js
Lo primero es crear un elemento de tarjeta pero no agregarlo a dom.
en segundo lugar, está tratando de obtener const abilities = document.querySelector(".power1 p"); que no existe en DOM.
¿Por qué no agregar estilos al propio HTML mientras crea el DOM de la tarjeta?
código optimizado
function generatehtml(result, appendToList) { const themecolor = typecolor[result.types[0].type.name]; const name = result.name[0].toUpperCase() + result.name.slice(1); const newhtml = ` <div class=pokecard style="background: radial-gradient(circle at 50% 0%, ${themecolor} 36%, #ffffff 36%)"> . . . <div class="power1"> <p style="background: ${themecolor}"> ${result.types[0].type.name} <img src="Grass.png" /> </p> </div> . . . </div> `; if (appendToList) searchcont.innerHTML += newhtml; else searchcont.innerHTML = newhtml; }