为什么这段代码在我隐藏按钮后不显示它？

Question

当我运行这个 JavaScript 代码时，button2 不会再次显示。我不确定为什么会这样。我正在尝试在我正在创建的游戏中使用它。我在 Google 上搜索了多次，但找不到答案。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .btn1 {
                background-color: white;
                border: 2px solid black;
                border-radius: 12px;
            }
            .btn2 {
                background-color: white;
                border: 2px solid black;
                border-radius: 12px;
                display: none;
            }
        </style>
    </head>
    <body>
        <button class="btn1" onclick="showBtn2()">
            Show Button 2
        </button>
        <button class="btn2" id="btn2"></button>
    </body>
    <script type="text/javascript">
        const btn2 = document.getElementById("btn2");

        function showBtn2() {
            btn2.style.display = "auto";
        }
    </script>
</html>

Answer 1

也许btn2.style.display = "block";？
或者，正如@charlietfl 添加的那样，btn2.style.display = "inline"; 因为这是浏览器默认的按钮

display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).

display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.

.btn1 {
  background-color: white;
  border: 2px solid black;
  border-radius: 12px;
}
.btn2 {
  background-color: white;
  border: 2px solid black;
  border-radius: 12px;
  display: none;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button class="btn1" onclick="showBtn2()">
            Show Button 2
        </button>
        <button class="btn2" id="btn2">new button here</button>
    </body>
    <script type="text/javascript">
        const btn2 = document.getElementById("btn2");

        function showBtn2() {
            btn2.style.display = "block";
        }
    </script>
</html>

Answer 2

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .btn1 {
                background-color: white;
                border: 2px solid black;
                border-radius: 12px;
            }
            .btn2 {
                background-color: white;
                border: 2px solid black;
                border-radius: 12px;
                display: none;
            }
        </style>
    </head>
    <body>
        <button class="btn1" onclick="showBtn2()">
            Show Button 2
        </button>
        <button class="btn2" id="btn2">Button 2</button>
        <script type="text/javascript">
        const btn2 = document.getElementById("btn2");
        function showBtn2() {
            btn2.style.display = "inline";
        }
    </script>
    </body>
</html>

使用 display = inline or block 而不是 auto。

像这样向按钮 2 添加一些文本内容： <button class="btn2" id="btn2">Button 2</button>

Answer 3

处理此问题并提供更多可重用代码的好方法是使用 <element>.classList.remove() 和 <element>.classList.add() 设置或取消设置 hidden class。这对于切换 <element>.classList.toggle().

也很有用

这有一个额外的好处，就是可以在 CSS 中设置默认显示样式，而不是将其埋在 javascript 中。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .btn1 {
                background-color: white;
                border: 2px solid black;
                border-radius: 12px;
            }
            .btn2 {
                background-color: white;
                border: 2px solid black;
                border-radius: 12px;
                /* allows setting preferred display in CSS */
                display: block; 
            }
            .hidden {
                display: none;
            }
        </style>
    </head>
    <body>
        <button class="btn1" onclick="showBtn2()">
            Show Button 2
        </button>
        <button class="btn1" onclick="toggleBtn2()">
            Toggle Button 2
        </button>
        <button class="btn2 hidden" id="btn2">Button 2</button>
    </body>
    <script type="text/javascript">
        const btn2 = document.getElementById("btn2");

        function showBtn2() {
            btn2.classList.remove("hidden");
        }
        function toggleBtn2() {
            btn2.classList.toggle("hidden");
        }
    </script>
</html>

Answer 4

CSS: "display: auto;"?

显示没有自动属性。您可以尝试“内联”或“块”。

'''
function showBtn2() {
    btn2.style.display = "inline";
}
'''

Answer 5

没有auto显示是CSS。正如 tarkh 在他的回答中提到的那样， display block 会将新按钮插入到初始按钮下方，而其他显示选项会有其他行为。但是 display 属性没有值 auto.

这可能是我的意见，但我认为现代网站不应该为事件使用 onclick 功能。我们应该把我们的HTML、JS和CSS分开。这有助于提高可重用性。 https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

因此我将创建一个使用 Javascript 中的事件处理程序的解决方案。类似于：

window.onload = function(){
const btn2 = document.getElementById("btn2");
const btn1 = document.getElementsByClassName("btn1");

    for(let i = 0; i < btn1.length; i++) {
        btn1[i].addEventListener('click', function(){
            btn2.style.display = "block";   
        })
    }
}

Answer 6

尝试使用

btn2.style.display = "block";

对于您的脚本，因为 css 显示没有您

的那种属性

您可以在此处阅读更多内容：more 你会看到没有 display:auto

这样的东西

为什么这段代码在我隐藏按钮后不显示它？

Why doesn't this code display the button after I hide it?

javascript

html

css

display

htmlbutton