Question

我有6个按钮，分别是button1，button2，button3等。每个按钮上的文本是“按钮1”，“按钮2”等。当您单击按钮时，它会使按钮的文本发生变化。我希望文本保持约5秒，然后再改回原来的状态。我已经查看了Stack Overflow上的其他一些问题，但没有人回答我的问题。感谢

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>

Answer 2

如果您像我一样，仍然在使用HTML 4.01，并且需要一种快速的方法来切换按钮值标签，如下所示...

value="dingos"

切换

.textContent to .value

HTML - 如何在一定时间后更改按钮文本

2 个答案: