change button label on click css code example

Example 1: javascript change button text onclick

<!DOCTYPE html>
<html>
<body>

<button id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed!";
}
</script>

</body>
</html>

Example 2: javascript when button clicked different text appears

function show() {
    // get the box
    var box = document.getElementById('box');

    // get the current value of the box's display property
    var displaySetting = myClock.style.display;

    // also get the box button, so we can change what it says
    var showButton = document.getElementById('showButton');

    // now toggle the box and the button text, depending on current state
    if (displaySetting == 'block') {
      // box is visible. hide it
      myClock.style.display = 'none';
      // change button text
      clockButton.innerHTML = 'Show box';
    }
    else {
      // box is hidden. show it
      myClock.style.display = 'block';
      // change button text
      clockButton.innerHTML = 'Hide box';
    }
  }

Tags:

Html Example

Recent Posts