为什么我隐藏后此代码不显示按钮？答案

【问题标题】：Why doesn't this code display the button after I hide it?为什么我隐藏后此代码不显示按钮？
【发布时间】：2020-12-11 23:16:07
【问题描述】：

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

<!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>

【问题讨论】：

标签： javascript html css display htmlbutton

【解决方案1】：

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

【讨论】：

【解决方案2】：

没有auto显示是CSS。正如 tarkh 在他的回答中提到的那样，显示 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";   
        })
    }
}

【讨论】：

【解决方案3】：

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

display:block 表示元素以块的形式显示，如段落和标题一直都是。一个块有一些空格在它的上面和下面，并且不允许在它旁边有任何 HTML 元素，除了当以其他方式订购时（通过将浮动声明添加到另一个元素，例如）。

display: inline 表示元素内联显示，在当前块在同一行。只有当它在两个街区之间时该元素形成一个“匿名块”，但它具有最小的可能的宽度。

.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>

【讨论】：

或“内联”，因为这是浏览器默认的按钮
或unset 将其恢复为默认值

【解决方案4】：

<!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>

【讨论】：

【解决方案5】：

CSS: "display: auto;"?

display 没有 auto 属性。您可以尝试“内联”或“阻止”。

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

【讨论】：

【解决方案6】：

尝试使用

btn2.style.display = "block";

因为 css display 没有你的那种属性

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

这样的东西

【讨论】：

这会显示按钮，但位置不正确。