How to change button text or link text in JavaScript?

by

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

More Related Contents:

  1. Can I make a not submit a form?
  2. Disable form auto submit on button click
  3. Javascript Confirm popup Yes, No button instead of OK and Cancel
  4. Link inside a button not working in Firefox
  5. Why my show hide button needs double-click on first time
  6. Changing button text onclick
  7. Javascript – Dynamically assign onclick event in the loop
  8. Hiding a button in Javascript
  9. Change Button color onClick
  10. Setting a button’s value using javascript
  11. Disable button whenever a text field is empty dynamically
  12. Attribute onclick=”function()” not functioning as intended?
  13. Is there a way to get a element to link to a location without wrapping it in an
  14. JavaScript button onclick not working
  15. Form submit button will not submit when name of button is “submit” [duplicate]
  16. How to set same value for all the text fields with same name attribute using Javascript?
  17. How to check the value of input [closed]
  18. Can Javascript read the source of any web page?
  19. Chrome counts characters wrong in textarea with maxlength attribute
  20. How do I preserve line breaks when getting text from a textarea?
  21. Can we refer to JavaScript variables across webpages in a browser session?
  22. How to add Drop-Down list () programmatically?
  23. HTML table with fixed headers and a fixed column? [closed]
  24. Web Workers and Canvas
  25. HTML Drag And Drop On Mobile Devices
  26. Dynamically creating a specific number of input form elements
  27. Find selected item in Datalist in HTML
  28. Modal image galleries – multiple images
  29. How do I reload the page without the query parameters?
  30. Get Clicked from

Leave a Comment