How to change the buttons text using javascript

Question

I have the following code to set the text of the button through javascript code   but it does not work it remains same the text remains same   function showFilterItem         if  filterstatus    0            filterstatus   1           find   lt   FileAdminRadGrid ClientID   gt    get masterTableView   showFilterItem            document getElementById  ShowButton   innerHTML    Hide Filter             else           filterstatus   0           find   lt   FileAdminRadGrid ClientID   gt    get masterTableView   hideFilterItem            document getElementById  ShowButton   innerHTML    Show filter             And my html button code is     lt input  class  button black  id  ShowButton  type  button  runat  server   value  Show Filter  onclick  showFilterItem      gt

User · Answer

You can toggle filterstatus value like this  filterstatus    1    So your function looks like  function showFilterItem objButton    if  filterstatus    0         find   lt   FileAdminRadGrid ClientID   gt    get masterTableView   showFilterItem        objButton value    Hide Filter     else        find   lt   FileAdminRadGrid ClientID   gt    get masterTableView   hideFilterItem        objButton value    Show filter       filterstatus    1

User · Answer

innerText is the current correct answer for this  The other answers are outdated and incorrect   document getElementById  ShowButton   innerText    Show filter     innerHTML also works  and can be used to insert HTML

User · Answer

If the HTMLElement is input type  button    input type  submit    etc    lt input id  ShowButton  type  button  value  Show  gt   lt input id  ShowButton  type  submit  value  Show  gt    change it using this code   document querySelector   ShowButton   value    Hide     If  the HTMLElement is button type  button    button type  submit    etc    lt button id  ShowButton  type  button  gt Show lt  button gt   lt button id  ShowButton  type  submit  gt Show lt  button gt    change it using any of these methods   document querySelector   ShowButton   innerHTML    Hide   document querySelector   ShowButton   innerText    Hide   document querySelector   ShowButton   textContent    Hide     Please note that   input is an empty tag and cannot have innerHTML  innerText or textContent  button is a container tag and can have innerHTML  innerText or textContent     Ignore this answer if you ain t using asp net-web-forms  asp net-ajax and rad-grid  You must use value instead of innerHTML   Try this   document getElementById  ShowButton   value   Hide Filter     And since you are running the button at server the ID may get mangled in the framework  I so  try  document getElementById   lt   ShowButton ClientID   gt    value   Hide Filter     Another better way to do this is like this   On markup  change your onclick attribute like this  onclick  showFilterItem this    Now use it like this  function showFilterItem objButton        if  filterstatus    0            filterstatus   1           find   lt   FileAdminRadGrid ClientID   gt    get masterTableView   showFilterItem            objButton value    Hide Filter             else           filterstatus   0           find   lt   FileAdminRadGrid ClientID   gt    get masterTableView   hideFilterItem            objButton value    Show filter

User · Answer

I know this question has been answered but I also see there is another way missing which I would like to cover it There are multiple ways to achieve this    1- innerHTML  document getElementById  ShowButton   innerHTML    Show Filter     You can insert HTML into this  But the disadvantage of this method is  it has cross site security attacks  So for adding text  its better to avoid this for security reasons   2- innerText  document getElementById  ShowButton   innerText    Show Filter     This will also achieve the result but its heavy under the hood as it requires some layout system information  due to which the performance decreases  Unlike innerHTML  you cannot insert the HTML tags with this  Check Performance Here  3- textContent  document getElementById  ShowButton   textContent    Show Filter     This will also achieve the same result but it doesn t have security issues like innerHTML as it doesn t parse HTML like innerText  Besides  it is also light due to which performance increases   So if a text has to be added like above  then its better to use textContent

User · Answer

Another solution could be using jquery button selector inside the if else statement      buttonId   text  your text     function showFilterItem     if  filterstatus    0        filterstatus   1       find   lt   FileAdminRadGrid ClientID   gt    get masterTableView   showFilterItem            ShowButton   text  Hide Filter      else       filterstatus   0       find   lt   FileAdminRadGrid ClientID   gt    get masterTableView   hideFilterItem             ShowButton   text  Show Filter

[javascript] How to change the buttons text using javascript

Examples related to javascript

Examples related to html

Examples related to button