changing the button name when clicked

Question

I have a bootstrap button which displays "Show User Information" as the button lable. When user click on the button, i want to change the label to "Display Only Users" and again when user click on "Display Only Users" it has to change the button label to "Show User Information".

 <button class="btn btn-primary" type="button" onclick="myFunction()" id="myButton1">Show User Information</button>

js code:

  function myFunction() {
        var elem = document.getElementById("myButton1");
         if (elem=="Show User Information") elem.value = "Display Only Users";
        else elem.value = "Show User Information";
}

The above js code is not changing the button label when clicked. Any inputs?

Duplicate of https://stackoverflow.com/questions/10671174/changing-button-text-onclick — arunmmanoharan, Jan 12 '18 at 15:13
Possible duplicate of [Changing button text onclick](https://stackoverflow.com/questions/10671174/changing-button-text-onclick) — arunmmanoharan, Jan 12 '18 at 15:20

score 1 · Answer 1 · answered Jan 12 '18 at 15:18

1

Add value attribute to the button ,

value="Show User Information"

and retrieve in js using and compare

ele.value=="Show User Information"

answered Jan 12 '18 at 15:18

Nawap

43
5

score 1 · Answer 2 · answered Jan 12 '18 at 15:27

You need to check the text of the button, not the element itself

function myFunction() {
  var elem = document.getElementById("myButton1"),
      text = elem.textContent || elem.innerText;

  if (text === "Show User Information") 
    elem.innerHTML = "Display Only Users";
  else 
    elem.innerHTML = "Show User Information";
}

<button class="btn btn-primary" type="button" onclick="myFunction()" id="myButton1">Show User Information</button>

changing the button name when clicked

2 Answers2