單擊后如何顯示和隱藏按鈕？

Question

我試過這個：

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

js：

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

Answer 1

嘗試這個

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

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

Answer 2

您在visibility方面有拼寫錯誤，這不是您在 javascript 中定義函數的方式。

您還需要將元素引用作為函數的參數向下傳遞。

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

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

或使用內聯 js：

 <button onclick="this.style.visibility = 'hidden'">Click me</button>

Answer 3

存在三個問題：

1. 您將button_onclick()作為一個函數調用，但它沒有定義為一個函數。
2. 使用內聯onclick不好
3. 你拼錯了visibality 。 您應該改用visibility 。

如果你想處理事件。 最好的方法是將事件偵聽器附加到元素。

 const myButton = document.querySelector('.my-button') myButton.addEventListener('click', () => { myButton.style.visibility = 'hidden' })

 <button class="my-button">Click me</button>

Answer 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>

謝謝