InnerHTML 不显示字符串中的内容

Question

我试图用 .innerHTML 显示两个按钮，但它不显示字符串中的内容。控制台没有显示任何错误，我检查了拼写错误，但没有发现任何错误。

这是我的 HTML :

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

这是我的 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;
};

闪亮HTML字符串中的内容应该显示在#buttonShiny div 但它不起作用

调用JS文件的脚本标签就在body结束标签之前

Answer 1

是的，您声明了该函数但从不使用它。仅将 displayButtonShiny("x") 添加到您的 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>

InnerHTML 不显示字符串中的内容

InnerHTML not displaying the content in string

html

javascript

innerhtml