CODEWITHSUNDEEP
javascripthtmljsp
hinata
hinata

Reputation: 385

Changing button text by Click in JavaScript

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?

Upvotes: 4

Views: 1972

Answers (5)

SignorRossi
SignorRossi

Reputation: 1

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>

Upvotes: 0

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

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

Upvotes: 2

rashidnk
rashidnk

Reputation: 4292

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()

Upvotes: 3

DDan
DDan

Reputation: 8276

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

Upvotes: 2

Steven Bennett
Steven Bennett

Reputation: 309

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";

Upvotes: 1

Related Questions