HTML - Как сделать изменение текста кнопки через определенное время

Question

У меня есть 6 кнопок с именем button1, button2, button3 и т. Д. Текст на каждой из кнопок - «кнопка один», «кнопка два» и т. Д. Когда вы нажимаете на кнопки, это изменяет текст кнопки. Я хочу, чтобы текст оставался в течение примерно 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>