Javascript 尝试创建在“无”和“块”之间切换显示的按钮时，只会工作一次

我的页面上有一个相当大的横幅，所以我想让用户能够切换其可见性（使用Display属性）。我有一个按钮可以设置显示：无，但它无法在再次单击时将其设置回显示：块。代码片段：

CSS:

HTML:

JavaScript:

<script>
        function toggleBanner() {
            if (document.getElementById("banner-row").style.display = "block") {
                document.getElementById("banner-row").style.display = "none";
            }
            else if (document.getElementById("banner-row").style.display = "none") {
                document.getElementById("banner-row").style.display = "block"
            }
        }
</script>

函数toggleBanner（）{
if（document.getElementById（“横幅行”）.style.display=“block”）{
document.getElementById（“横幅行”）.style.display=“无”；
}
else if（document.getElementById（“横幅行”）.style.display=“无”）{
document.getElementById（“横幅行”）.style.display=“块”
}
}

---

我希望我所要求的是可能的，并为我的愚蠢错误道歉！仍在学习所有这些内容。

您需要在if和else if条件中使用==而不是=是JavaScript中的比较运算符，=用于赋值。

存在许多问题：

1） 您正在尝试设置HTML中id为

id

但在CSS中是

类的元素的样式

2） 您正在
if/else
条件中分配（
=
）值，而不是

3） 您正在检查内联样式，最初，横幅没有，因此
display
为空。你可以像我在下面做的那样检查，也可以使用


//缓存元素，以免重复
const banner=document.getElementById（“横幅行”）；
函数toggleBanner（）{
如果（banner.style.display==“block”| | banner.style.display==”）{
banner.style.display=“无”；
}否则{
banner.style.display=“block”
}
}
#横幅行{
显示：块；
}
横幅
单击
当您使用一个类来隐藏横幅时，在JS中只需简单地切换类列表即可


const banner=document.getElementById（“横幅行”）；
const button=document.getElementsByTagName（“按钮”）[0]；
toggleBanner=（）=>banner.classList.toggle（“隐藏”）
。隐藏{
显示：无；
}

=
赋值。您应该使用
==
来比较值。此外，您不能使用
.style
阅读CSS。您需要使用
.getComputedStyle
。在CSS中，您的目标是类，在Javascript中，您的目标是id。请检查
如果
和
如果
条件，而不是
=
我为我的错误道歉：（但非常感谢您的帮助，这很有意义，我喜欢const的整洁。我以前从未处理过JS/css/html，并且被分配给了一个期限很紧的大型项目，所以我觉得有点匆忙，因此我忘了包括横幅行html，它已经正确设置了ID。再次感谢：）@Ubi，也值得看看杰拉德的答案。
<button class="btn btn-default navbar-btn" onclick="toggleBanner()"><span class="dx-icon-collapse icon"></span></button>

<script>
        function toggleBanner() {
            if (document.getElementById("banner-row").style.display = "block") {
                document.getElementById("banner-row").style.display = "none";
            }
            else if (document.getElementById("banner-row").style.display = "none") {
                document.getElementById("banner-row").style.display = "block"
            }
        }
</script>