通过单击JavaScript更改按钮文本

Question

I'm using following codes in a JSP page.This is my function to change button text by a button click in JavaScript.

    <script>
    function click(){
        var el=document.getElementById(btnaccept);
        if(el.value=="Accept"){
           el.value==="Accepted"; 
        }else{
            el.value==="Accept";
        }
    } 
 </script>

This is my button;

<button type="button" class="btn btn-default btn-sm" id="btnaccept"  onclick="click()">
                <span class="glyphicon glyphicon-ok" aria-hidden="true" name="accept"></span> Accept
      </button>

This code is not functioning when I click the "Accept" button. What error I have done here?

Answer 1

Try this code

<script>
      function click1() {
        var el = document.getElementById('btnaccept');
        //alert(el.innerHTML);
        if (el.textContent == "Accept") {
          el.textContent = "Accepted";
        } else {
          el.textContent = "Accept";
        }
      }
    </script>

change onclick event to click1()

Answer 2

A few things:

• Don't name your funtion click that won't work.
• You are not using value on the button, you are using inner HTML.
• use if you want to manipulate the value, or manipulate ineerHTML if you want the other way around.
• document.getElementById takes string as argument, so you want to write there document.getElementById('btnaccept');
• Use = to assign value === is comparison (equal value or type)

See working demo

Answer 3

First thing you should use click as function name use any other name. It will treat it as mouseevent docs

=== is used for comparison to assign value use = .

Here I have used clickbutton() instead of click() for the function name.

HTML

<button type="button" class="btn btn-default btn-sm" id="btnaccept"  onclick="clickbutton()">

Script

function clickbutton() {
   var el = document.getElementById('btnaccept');
   if (el.value == "Accept") {
     el.value = "Accepted";
   } else {
     el.value = "Accept";
   }
 }

Demo here

Answer 4

As mattt said, you need to use the assignment operator = instead of the equality operator === when assigning values. Also, when using getElementById , it will be expecting a string, so you want to use getElementById("btnaccept");

As well, to set the text of a button element I believe you will need to use el.innerText = "Accept";

Answer 5

I implemented a toggle button for a colapsible panel in the following way:

<button type="button" class="btn btn-default" onclick="changeIcon(this)">
<span class="glyphicon glyphicon-triangle-bottom"></span>
</button>

<script>
function changeIcon(button) {

    if(button.firstElementChild.getAttribute("class") == "glyphicon glyphicon-triangle-bottom")
    {
        button.firstElementChild.setAttribute("class", "glyphicon glyphicon-triangle-top");
    }
    else
    {
        button.firstElementChild.setAttribute("class", "glyphicon glyphicon-triangle-bottom");
    }
}
</script>