如何解决隐藏该代码后，为什么没有显示该按钮？
运行此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>
解决方法
处理此问题并提供更多可重用代码的一种好方法是使用<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>,
也许是btn2.style.display = "block";？
或者，如@charlietfl所添加的，btn2.style.display = "inline";，因为这是浏览器默认的按钮
display：block表示元素显示为块，例如 段落和标题一直都是。一个块有一些空白 上方和下方，并且不容忍其旁边的HTML元素，除了 否则（通过将float声明添加到另一个 元素）。
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>,
<!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>
显示没有自动属性。 您可以尝试“内联”或“阻止”。
'''
function showBtn2() {
btn2.style.display = "inline";
}
'''
没有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";
})
}
}
尝试使用
btn2.style.display = "block";
您的脚本，因为CSS显示没有您这样的属性
您可以在这里阅读更多内容：more 您会看到没有诸如 display：auto
之类的东西版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。