HTML - 如何在一定的時間後改變按鈕文字

Question

我有6個按鈕，分別叫做button1，button2，button3等等。每個按鈕上的文本都是「按鈕1」，「按鈕2」等等。當你點擊按鈕時，它會改變按鈕的文字。我希望文本能夠保持5秒左右的狀態，然後再回到之前的狀態。我已經看了一些關於堆棧溢出的其他問題，但沒有人回答我的問題。由於

Answer 1

如果尚未完成，需要一個id添加到每個按鈕，就像這樣：

<button id="button1">button 1</button> 

要只用JS改變按鈕上的文字：

<script> 
function changeText(button, text, textToChangeBackTo) { 
    buttonId = document.getElementById(button); 
    buttonId.textContent = text; 
    setTimeout(function() { back(buttonId, textToChangeBackTo); }, 5000); 
    function back(button, textToChangeBackTo){ button.textContent = textToChangeBackTo; } 
} 
</script> 

要調用的函數，只需添加一個onClick每個按鈕，像這樣：

<button onClick="changeText('button1', 'button clicked', 'button 1');" id="button1">button 1</button> 

所以最終的代碼如下：

<button onClick="changeText('button1', 'button clicked 1', 'button 1');" id="button1">button 1</button> 
 
    <button onClick="changeText('button2', 'button clicked 2', 'button 2');" id="button2">button 2</button> 
 
    <button onClick="changeText('button3', 'button clicked 3', 'button 3');" id="button3">button 3</button> 
 
     <script> 
 
    function changeText(button, text, textToChangeBackTo) { 
 
     buttonId = document.getElementById(button); 
 
     buttonId.textContent = text; 
 
     setTimeout(function() { document.getElementById(button).textContent = textToChangeBackTo; }, 5000); 
 
    } 
 
    </script>