单击后如何显示和隐藏按钮？答案

【问题标题】：How can I show and hide a button after click?单击后如何显示和隐藏按钮？
【发布时间】：2020-05-21 17:07:33
【问题描述】：

我试过了：

<button onclick="button_onclick()">Click me</button>

js:

button_onclick() = "this.style.visibility = 'hidden';"

【问题讨论】：

标签： javascript html button hide

【解决方案1】：

试试这个

function button_onclick() {
 document.getElementById("btn").style.visibility="hidden";
}

&lt;button id="btn" onclick="button_onclick()"&gt;Click me&lt;/button&gt;

【讨论】：

【解决方案2】：

您在 visibility 中有拼写错误，这不是您在 javascript 中 define functions 的方式。

您还需要将元素引用作为函数的参数向下传递。

function button_onclick(element) {
    element.style.visibility = 'hidden';
}

&lt;button onclick="button_onclick(this)"&gt;Click me&lt;/button&gt;

OR 与内联 js：

&lt;button onclick="this.style.visibility = 'hidden'"&gt;Click me&lt;/button&gt;

【讨论】：

【解决方案3】：

存在三个问题：

您将 button_onclick() 作为一个函数调用，但它不是 defined 作为一个函数。
使用内联 onclick 不好
你拼错了visibality。您应该改用visibility。

如果你想处理事件。最好的方法是将event listener 附加到元素。

const myButton = document.querySelector('.my-button')

myButton.addEventListener('click', () => {
  myButton.style.visibility = 'hidden'
})

&lt;button class="my-button"&gt;Click me&lt;/button&gt;

【讨论】：

【解决方案4】：

最简单的方法

<button onclick="this.style.display = 'none'">Click me</button>

注意这种做法不是一个好习惯就这样吧

<button id="btn"> Click me </button>
<script>
const btn = document.querySelector ('#btn');
btn.addEventListener ('click', () =>{
btn.style.display = "none"
// btn.style.visibility = "hidden"
})

</script>

谢谢

【讨论】：