Search code examples
htmlbuttonwait

Html button text change

I like to have this button. When you click on it the button text should change to "Updating...". Then two seconds later it should change to "Updated!" and the button shouldn't be clickable after that.

Current Html Button script:

 <a class="btn-primary-md" id="buyButton" onclick="text = 'Updated!'">Update</a>
Solution

  • So to sum up, you have a button/link and onclick you'll want:

    1. The text of that element to change.
    2. The element to be disabled.
    3. After two seconds the value to change again to another value.

    You can do this by extracting the JavaScript from the HTML for readability and maintainability like this:

    var button = document.getElementById("btn");

button.addEventListener("click", function () {
	button.disabled = true;
  button.innerHTML = "Waiting...";
    
	setTimeout(function () {
  	button.innerHTML = "Thank you!";
		button.disabled = false;
  }, 2000);
});
    <button id="btn" type="button">
  Click me
</button>