Changing button text by Click in 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