我如何阻止这个JS的“显示和隐藏”按钮一开始就显示内容呢？

Question

基本上，我有3个图像，一旦按钮被点击，它会显示这些图像，然而，当页面加载时，按钮已经被打开并显示图像，一旦你点击它，图像就会消失。所以按钮工作，但它开始显示的内容不是我想要的。

null

var a;
function show_hide()
{
    if(a==1)
    {
        document.getElementById("image").style.display="inline";
        return a=0;
    }

    else
    {
        document.getElementById("image").style.display="none";
        return a=1;
    }

}

    <div id="image">
            <img class= "tree1" src="img/tree1.jpeg">
            <img class= "tree2" src="img/tree2.jpeg">
            <img class= "tree3" src="img/roots.jpeg">
        </div>
      <div>
        <button onclick="show_hide()">Click to Reveal</button>
      </div>

      <script src="showhideelement.js"></script>

null

Answer 1

您可以将a=1赋值，并使您的div显示为无。

HTML：

<div id="image" style="display: none">
   <img class= "tree1" src="img/tree1.jpeg">
   <img class= "tree2" src="img/tree2.jpeg">
   <img class= "tree3" src="img/roots.jpeg">
</div>
<div>
   <button onclick="show_hide()">Click to Reveal</button>
</div>

JS：

var a = 1;
function show_hide()
{
    if(a==1)
    {
        document.getElementById("image").style.display="inline";
        return a=0;
    }

    else
    {
        document.getElementById("image").style.display="none";
        return a=1;
    }

}