InnerHTML not displaying the content in string

Question

I am trying to display two buttons with .innerHTML but it doesn't display the content put in the string. The console is not showing any error and I've checked for typos but I haven't found anything.

Here's my HTML :

<div class="buttons">
   <div class="buttons_inner" id="buttonShiny"></div>
</div>

And here's my 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;
};

The content in the shinyHTMLString should be displayed in the #buttonShiny div but it doesn't work

The script tag to call the JS file is right before the closing body tag

Where does displayButtonShiny () get called? Please provide a minimal reproducible example that demonstrtes the issue and expand on what "doesn't work" means in more specific detail — charlietfl
– charlietfl, Commented Jan 2, 2022 at 20:58

Maik Lowrey · Accepted Answer · 2022-01-02 21:00:23Z

2

Yes you declare the function but never use it. Add only displayButtonShiny("x") to your js code.

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>

answered Jan 2, 2022 at 21:00

Maik Lowrey

17.8k8 gold badges55 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

InnerHTML not displaying the content in string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related