文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在使用JavaScript的onclick事件后隐藏按钮？

问如何在使用JavaScript的onclick事件后隐藏按钮？
EN

Stack Overflow用户

提问于 2020-07-03 17:11:31

回答 3查看 1.2K关注 0票数 1

我试图隐藏一个按钮后，onclick事件与JavaScript。我的按钮位于页面的顶部，所以当有人点击它时，会显示内容，但是按钮仍然在页面上。我在想，在用户点击按钮后，我是否可以隐藏它。

你对怎么做有什么建议吗？

下面是我使用的代码：

function showDiv() {
    document.getElementById('menuDiv').style.display = "block";
 }

#menuDiv{
        display: none; 
}

<div class="text-center">

        <button onclick="showDiv()" class="btn btn-light"><img src="images/cartoon-cookie.png" alt="Cookie"
                style="height:100px;">Yes, I want to see the menu</button>
    </div>

    <div id="menuDiv">
    <!-- here is the content that is revealed after the on click event -->
    </div>

javascript

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-07-03 17:16:26

function showDiv() {
    document.getElementById('menuDiv').style.display = "block";
    document.getElementById('btn').style.display = "none";
 }

#menuDiv{
        display: none; 
}

<div class="text-center">

        <button id='btn' onclick="showDiv()" class="btn btn-light"><img src="images/cartoon-cookie.png" alt="Cookie"
                style="height:100px;">Yes, I want to see the menu</button>
    </div>

    <div id="menuDiv">
    <!-- here is the content that is revealed after the on click event -->
    </div>

你必须用这个来隐藏按钮

document.getElementById('btn').style.display = "none";

票数 0

Stack Overflow用户

发布于 2020-07-03 17:22:11

function showDiv() {
    document.getElementById('menuDiv').style.display = "block";
 }

#menuDiv{
        display: none; 
}

<div class="text-center">

        <button id = "myBtn" onclick="showDiv()" class="btn btn-light"><img src="images/cartoon-cookie.png" alt="Cookie"
                style="height:100px;">Yes, I want to see the menu</button>
    </div>

    <div id="menuDiv">
    <!-- here is the content that is revealed after the on click event -->
    </div>

在上面的代码中，您需要添加

document.getElementById('myBtn').style.display = "none";

在showDiv函数中低于document.getElementById('menuDiv').style.display = "block";

它通过将display: none属性应用于myBtn元素来隐藏按钮

您还可以使用类或标记名来获取元素并应用该属性。

票数 1

Stack Overflow用户

发布于 2020-07-03 17:15:08

可以使用style属性visibility隐藏按钮，并将其设置为hidden。或者，如果隐藏还不够，可以从DOM中删除按钮。

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62719921

复制

相似问题

问如何在使用JavaScript的onclick事件后隐藏按钮？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在使用JavaScript的onclick事件后隐藏按钮？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在使用JavaScript的onclick事件后隐藏按钮？
EN