How to change button text or link text in JavaScript

Question

I have this HTML button    lt button id  myButton  onClick  lock    toggleText this id    gt Lock lt  button gt    And this is my toggleText JavaScript function   function toggleText button id        if  document getElementById  button id   text     Lock                document getElementById  button id   text    Unlock           else            document getElementById  button id   text    Lock            As far as I know  button text   lt button id  myButton  gt Lock lt  button gt   is just like any link text    lt a href     gt Lock lt  a gt    So the fact that it s a button doesn t matter  However  I can t access the button text and change it   I tried   button id     button id       Lock       Lock   but nothing works   How can I access and change a button text  not value  or a link text

User · Answer

You can simply use   document getElementById button id  innerText    Your text here    If you want to use HTML formatting  use the innerHTML property instead

User · Answer

Change  text to  textContent to get set the text content   Or since you re dealing with a single text node  use  firstChild data in the same manner   Also  let s make sensible use of a variable  and enjoy some code reduction and eliminate redundant DOM selection by caching the result of getElementById   function toggleText button id        var el   document getElementById button id      if  el firstChild data     Lock                el firstChild data    Unlock           else            el firstChild data    Lock            Or even more compact like this   function toggleText button id        var text   document getElementById button id  firstChild     text data   text data     Lock     Unlock     Lock

User · Answer

Remove Quote  and use innerText instead of text  function toggleText button id                            -----    button id  -  gt  button id    if  document getElementById button id  innerText     Lock                document getElementById button id  innerText    Unlock           else            document getElementById button id  innerText    Lock

User · Answer

document getElementById button id  innerHTML    Lock

[javascript] How to change button text or link text in JavaScript?

Examples related to javascript

Examples related to html

Examples related to button