切换隐藏/显示元素

Question

I'm trying to have a couple of buttons to show and hide some pictures, I have gotten it to somewhat work, but when I start the webpage the pictures are already shown, when I try make them invisible at start. I have tried swapping the "block" and "none" sentences in the function, but it just made the button less responsive.

javascript part:

function bassnectar() {
            var x = document.getElementById("myDIV3");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

html part:

 <button onclick="bassnectar()">Bassnectar</button>
 <div id="myDIV3">
   <img src="/images/bassnectar.jpg">
 </div>

Answer 1

What you're missing is that you're assuming that block elements have a default display value of block . Which would be intuitive.

Such is not the case though.

The initial value of display is the browser's default. If you query the value of the display property on a new HTML element, you'll get an empty string.

It doesn't return block until you explicitly set its display to block .

Edit:

It's important to note that setting a value in CSS doesn't change the behavior . If you set a div to be display block in CSS, it will still return an empty string if you query it.

Here's a working example:

 var block = document.createElement("div"); var inline = document.createElement("span"); console.log("Initial display values:") console.log(`block.style.display: ${block.style.display}`); console.log(`inline.style.display: ${inline.style.display}`); block.style.display = "block"; inline.style.display = "inline"; console.log("\nAfter setting them explicitly:") console.log(`block.style.display: ${block.style.display}`); console.log(`inline.style.display: ${inline.style.display}`);

 div { display: block;important; }