Changing button text onclick

Question

When I click on myButton1 button  I want the value to change to Close Curtain from Open Curtain HTML    lt input onclick  change    type  button  value  Open Curtain  id  myButton1  gt  lt  input gt    Javascript   function change          document getElementById  myButton1   value  Close Curtain       The button is displaying open curtain right now and I want it to change to close curtain  is this correct

User · Answer

It seems like there is just a simple typo error:

Remove the semicolon after change(), there should not be any in the function declaration.
Add a quote in front of the myButton1 declaration.

Corrected code:

<input onclick="change()" type="button" value="Open Curtain" id="myButton1" />
...
function change()
{
    document.getElementById("myButton1").value="Close Curtain"; 
}

A faster and simpler solution would be to include the code in your button and use the keyword this to access the button.

<input onclick="this.value='Close Curtain'" type="button" value="Open Curtain" id="myButton1" />

User · Answer

lt  DOCTYPE html gt   lt html gt       lt head gt         lt title gt events2 lt  title gt       lt  head gt       lt body gt         lt script gt          function fun               document getElementById  but   value    onclickIChange                     lt  script gt         lt form gt           lt input type  button  value  Button  onclick  fun    id  but  name  but  gt       lt  form gt     lt  body gt   lt  html gt

User · Answer

i know this is an old post but there is an option to sent the elemd id with the function call   lt button id  expand  class  btn expand  onclick  f1 this   gt Expand lt  button gt   lt button id  expand  class  btn expand  onclick  f1 this   gt Expand lt  button gt   lt button id  expand  class  btn expand  onclick  f1 this   gt Expand lt  button gt   lt button id  expand  class  btn expand  onclick  f1 this   gt Expand lt  button gt    function f1 objButton                if  objButton innerHTML   quot EXPAND quot   objButton innerHTML    quot MINIMIZE quot           else objButton innerHTML    quot EXPAND quot

User · Answer

This worked fine for me  I had multiple buttons which I wanted to toggle the input value text from  Add Range  to  Remove Range    lt input type  button  onclick  if this value   Add Range     this value  Remove Range     else   this value  Add Range        gt

User · Answer

If you prefer binding your events outside the html-markup  in the javascript  you could do it like this    x000D   x000D  document getElementById  curtainInput   addEventListener  x000D     click   x000D    function event    x000D      if  event target value      Open Curtain     x000D        event target value    Close Curtain   x000D        else   x000D        event target value    Open Curtain   x000D        x000D       x000D    false x000D     x000D   lt  doctype html gt  x000D   lt html gt  x000D   lt body gt  x000D     lt input  x000D           id  curtainInput   x000D           type  button   x000D           value  Open Curtain    gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

this code work for me    var btn   document getElementById  your btn id        if btn innerText   show           btn innerText  hide               else        btn innerText  show             using value is not work in my case

User · Answer

function change      myButton1 value   quot Open Curtain quot    myButton1 value  quot Close Curtain quot    myButton1 value  quot Open Curtain quot

User · Answer

If I ve understood your question correctly  you want to toggle between  Open Curtain  and  Close Curtain  -- changing to the  open curtain  if it s closed or vice versa  If that s what you need this will work   function change      no     here       if  this value   Close Curtain   this value    Open Curtain       else this value    Close Curtain       Note that you don t need to use document getElementById  myButton1   inside change as it is called in the context of myButton1 -- what I mean by context you ll come to know later  on reading books about JS   UPDATE   I was wrong  Not as I said earlier  this won t refer to the element itself  You can use this   function change      no     here       var elem   document getElementById  myButton1        if  elem value   Close Curtain   elem value    Open Curtain       else elem value    Close Curtain

User · Answer

lt input type  button  class  btn btn-default   value  click me changtext                id  myButton1  onClick  changetext      gt                lt script gt              function changetext                      var elem   document getElementById  myButton1                    if  elem value   click me change text                                                  elem value    changed text here                                         else                                         elem value    click me change text                                                 lt  script gt

User · Answer

When using the  lt button gt  element  or maybe others   setting  value  will not change the text  but innerHTML will   var btn   document getElementById  mybtn    btn value    my value      will just add a hidden value btn innerHTML    my text     When printed to the console     lt button id  mybtn  class  btn btn-primary  onclick  confirm    value  my value  gt my text lt  button gt

User · Answer

Or more simple without having to name the element  with  button  element     lt button onclick  toggleLog this   gt Stop logs lt  button gt    and script    var bWriteLog   true   function toggleLog elt       bWriteLog    bWriteLog    elt innerHTML   bWriteLog    Stop logs     Watch logs

User · Answer

This is simple way to change Submit to loading state       lt button id  custSub  type  submit  class  button left tiny  data-text-swap  Processing    amp nbsp   gt Submit  amp nbsp  lt i class  fa fa-angle-double-right  gt  lt  i gt  lt  button gt         lt script gt      jQuery document  ready function                   button   on  click   function               var el     this             if  el html      el data  text-swap                  el html el data  text-original                 else               el data  text-original   el html                 el html el data  text-swap                           setTimeout function                      el html el data  text-original                   500                             lt  script gt

User · Answer

Add this function to the script  function myFunction                      var btn   document getElementById  myButton                     if  btn value     Open Curtain                         btn value    Close Curtain                       btn innerHTML    Close Curtain                                     else                       btn value    Open Curtain                       btn innerHTML    Open Curtain                                      and edit the button   lt button onclick  myFunction    id  myButton  value  Open Curtain  gt Open Curtain lt  button gt

User · Answer

If not opposed to or may already be using jQuery  you could do this without the approach of having to use obtrusive js  Hope it helps  https   en wikipedia org wiki Unobtrusive JavaScript Also like to reference  https   stackoverflow com a 3910750 4812515 for a discussion on this   HTML        lt input type  button  value  Open Curtain  id myButton1  gt  lt  input gt    Javascript                 myButton1   click function                 var self   this              change self                           function change  el                if   el value      Open Curtain               el value    Close Curtain              else            el value    Open Curtain

User · Answer

Try this    lt input type  button  id  myButton1  value  Open Curtain  onClick  javascript change this    gt  lt  input gt   lt script gt  function change ref        ref value  Close Curtain      lt  script gt

User · Answer

There are lots of ways  And this should work too in all browsers and you don t have to use document getElementById anymore since you re passing the element itself to the function    lt input type  button  value  Open Curtain  onclick  return change this      gt    lt script type  text javascript  gt  function change  el         if   el value      Open Curtain            el value    Close Curtain       else         el value    Open Curtain      lt  script gt

User · Answer

this can be done easily with  a vbs code  as i m not so familiar with js      lt input type  button  id  btn  Value  Close  onclick  check  gt   lt script Language  VBScript  gt  sub check if btn Value  Close  then btn Value  Open   end sub  lt  script gt    and you re done   however this changes the Name to display only and does not change the function  onclick    i did some researches on how to do the second one and seem there isnt  something like  btn onclick          but i figured out a way using  lt  span   tag it goes like this     lt script Language  VBScript  gt    Sub function1   MsgBox  function1    span InnerHTML    lt Input type   button   Value   button2   onclick   function2   gt     End Sub     Sub function2   MsgBox  function2    span InnerHTML     lt Input type   button   Value   button1   onclick   function1   gt     End Sub    lt  script gt     lt body gt     lt span id  span  name  span   gt     lt input type  button  Value  button1  onclick  function1  gt     lt  span gt     lt  body gt    try it yourself   change the codes in sub function1 and sub function2  basically all you need to know to make it in jscript is the line   span InnerHTML            the rest is your code you wanna execute  hope this helps  D

User · Answer

You are missing an opening quote on the id  and you have a semi-colon after the function declaration  Also  the input tag does not need a closing tag   This works    lt input onclick  change    type  button  value  Open Curtain  id  myButton1  gt    lt script type  text javascript  gt  function change     document getElementById  myButton1   value  Close Curtain      lt  script gt

User · Answer

var count 0  document getElementById  play   onclick   function      if count 2    1                     document getElementById  video   pause                    document getElementById  play   innerHTML   Pause                else                document getElementById  video   play                document getElementById  play   innerHTML   Play                                count

[javascript] Changing button text onclick

Examples related to javascript

Examples related to html

Examples related to button

Examples related to onclick