blocks|key|2595813|text|可以使用style属性visibility隐藏按钮，并将其设置为hidden。或者，如果隐藏还不够，可以从DOM中删除按钮。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2595814|entityMap^0|B|A|W|6|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>You can hide the button using the the style property <code>visibility</code> and set it to <code>hidden</code>. Alternatively you can remove the button from the DOM, if hiding does not suffice.</p>


blocks|key|2595914|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2595915|function+showDiv()+{
++++document.getElementById('menuDiv').style.display+=+"block";
++++document.getElementById('btn').style.display+=+"none";
+}|code-block|syntax|javascript|2595916|#menuDiv{
++++++++display:+none;+
}​|2595917|<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">
++++
++++</div>|2595918|2595919|你必须用这个来隐藏按钮|2595920|document.getElementById('btn').style.display+=+"none";|2595921|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function showDiv() {
    document.getElementById('menuDiv').style.display = "block";
    document.getElementById('btn').style.display = "none";
 }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#menuDiv{
        display: none; 
}​</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="text-center"&gt;

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

    &lt;div id="menuDiv"&gt;
    &lt;!-- here is the content that is revealed after the on click event --&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>You have to use this for hiding button</p>
<pre><code>document.getElementById('btn').style.display = &quot;none&quot;;
</code></pre>


blocks|key|1702586|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1702587|function+showDiv()+{
++++document.getElementById('menuDiv').style.display+=+"block";
+}|code-block|syntax|javascript|1702588|#menuDiv{
++++++++display:+none;+
}​|1702589|<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">
++++
++++</div>|1702590|1702591|在上面的代码中，您需要添加|1702592|document.getElementById('myBtn').style.display+=+"none";|1702593|在showDiv函数中低于document.getElementById('menuDiv').style.display+=+"block";|offset|length|style|CODE|1702594|它通过将display:+none属性应用于myBtn元素来隐藏按钮|1702595|1702596|您还可以使用类或标记名来获取元素并应用该属性。|1702597|entityMap^0|0|0|0|0|0|0|0|D|1N|0|4|D|M|5|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|17|8|@]|9|@]|A|$]]|$1|N|3|O|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|P|3|Q|5|6|7|19|8|@$R|1A|S|1B|T|U]]|9|@]|A|$]]|$1|V|3|W|5|6|7|1C|8|@$R|1D|S|1E|T|U]|$R|1F|S|1G|T|U]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1I|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|11|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function showDiv() {
    document.getElementById('menuDiv').style.display = "block";
 }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#menuDiv{
        display: none; 
}​</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="text-center"&gt;

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

    &lt;div id="menuDiv"&gt;
    &lt;!-- here is the content that is revealed after the on click event --&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>In the above code, you need to add</p>
<pre><code>document.getElementById('myBtn').style.display = &quot;none&quot;;
</code></pre>
<p>in showDiv function below <code>document.getElementById('menuDiv').style.display = &quot;block&quot;;</code></p>
<p>It hides the button by applying <code>display: none</code> property to <code>myBtn</code> element</p>
<hr />
<p>You can also use class or tag name to fetch the element(s) and apply the property</p>


<p>I am trying to hide a button after onclick event with JavaScript. My button is located at the top of the page so when someone clicks on it, content is showed but the button still on the page. I was thinking if I could hide it after the user click on the button.</p>
<p>Do you have any hint on how to do it?</p>
<p>Here is the code that I am using:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function showDiv() {
    document.getElementById('menuDiv').style.display = "block";
 }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#menuDiv{
        display: none; 
}​</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="text-center"&gt;

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

    &lt;div id="menuDiv"&gt;
    &lt;!-- here is the content that is revealed after the on click event --&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>


How to hide a button after onclick event with JavaScript?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我试图隐藏一个按钮后，onclick事件与JavaScript。我的按钮位于页面的顶部，所以当有人点击它时，会显示内容，但是按钮仍然在页面上。我在想，在用户点击按钮后，我是否可以隐藏它。你对怎么做有什么建议吗？下面是我使用的代码：​function showDiv() {    document.getElementB...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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