Estoy tratando de mostrar dos botones con .innerHTML pero no muestra el contenido puesto en la cadena. La consola no muestra ningún error y he buscado errores tipográficos, pero no he encontrado nada.
Aquí está mi HTML:
<div class="buttons"> <div class="buttons_inner" id="buttonShiny"></div> </div>Y aquí está mi JS:
const shiny = document.getElementById('buttonShiny'); const displayButtonShiny = (pokemon) => { const shinyHTMLString = ` <button class="buttons_shiny" onclick="document.getElementById('pokemonSprite').src='https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/${pokemon.id}.png'">Shiny</button> <button class="buttons_normal" onclick="document.getElementById('pokemonSprite').src='https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png'">Normal</button> `; shiny.innerHTML = shinyHTMLString; };El contenido de shinyHTMLString debe mostrarse en el div #buttonShiny pero no funciona
La etiqueta del script para llamar al archivo JS está justo antes de la etiqueta del cuerpo de cierre.
Sí, declaras la función pero nunca la usas. Agregue solo displayButtonShiny("x") a su código js.
const shiny = document.getElementById('buttonShiny'); const displayButtonShiny = (pokemon) => { const shinyHTMLString = ` <button class="buttons_shiny" onclick="document.getElementById('pokemonSprite').src='https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/${pokemon.id}.png'">Shiny</button> <button class="buttons_normal" onclick="document.getElementById('pokemonSprite').src='https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png'">Normal</button> `; shiny.innerHTML = shinyHTMLString; }; displayButtonShiny("x"); // x = your pokemon <div class="buttons"> <div class="buttons_inner" id="buttonShiny">btn1</div> </div>